Left Column width

  • Resolved danny12

    (@danny12)


    9 years, 3 months ago

    I have a problem of size of the left side column of your template.
    I don’t understand because it is wider than your demo.
    How can you change the width of the left column?
    You can also change the width of the right column?
    Please help me to solve.. Thanks!

Viewing 12 replies - 1 through 12 (of 12 total)
  • Theme Author Shaped Pixels

    (@shaped-pixels)

    9 years, 3 months ago

    Sorry for late reply….and thanks for reposting.

    The width of the side column is dynamic, which means the width adjusts to a percentage of the screen size. But if you are viewing the demo site for Morphology Lite in the same screen that your own site is in, then there’s something not quite right then. The best way for me to help is if you have a link to your site so I can look at the source code with my browser development tools.

    On larger screens, the width is set to be 18% of the window size being seen. On smaller screens, this changes to 8%. This might be why it appears to have a sizing problem, but this is done by design to adapt to different devices from monitors, to tablets, to phones.

    To change that size, you would have to modify the CSS code of the theme. If you decide you want to do that, let me know and I will point you to the code that does this.

    Thread Starter danny12

    (@danny12)

    9 years, 3 months ago

    Sorry, thanks for the reply, i solved differently. Last night i was editing the site with google chrome and AdBlock active; I solved the problem by turning it off.
    Unfortunately i can’t post the site link because i’m using Instant WordPress on my pc.
    Instant WordPress can cause problems ??

    Theme Author Shaped Pixels

    (@shaped-pixels)

    9 years, 3 months ago

    Instant WordPress? I’ve never heard of that. But, you never know…it could. When I develop themes and test themes, I use XAMPP, which I’ve used for over 7 years now. I find that it’s the closest to having an actual local server. For those on MAC, I think there is a version for it, but I know some people use WAMP, but there’s other options too. For example: Local Development Options

    • This reply was modified 9 years, 3 months ago by Shaped Pixels.
    Thread Starter danny12

    (@danny12)

    9 years, 3 months ago

    Instant WordPress is a simple software that simulates a local server, this is the link .. http://www.instantwp.com
    As soon as i purchase a hosting and i transfer everything online.
    for now, thanks for everything.

    Thread Starter danny12

    (@danny12)

    9 years, 3 months ago

    Hi, i tried to do a quick test of altervista.org
    Unfortunately, even here I have problems with the size of the left column, while InstantWP I solved excluding AdBlock of google chrome.
    Why do I have this problem ??
    http://dannycastle.altervista.org
    In addition, I found that in cellular version, the text of the images on the homepage are not responsive, how can I fix?
    Thanks

    Theme Author Shaped Pixels

    (@shaped-pixels)

    9 years, 3 months ago

    Ah! Now I know why that I just saw your link and site. You are on an older version of Morphology lite 1.0.3, but the latest version is 1.1.9

    I would recommend you update your theme which uses percentage for the width. The one you are on is using a fixed width of 300px.

    Thread Starter danny12

    (@danny12)

    9 years, 3 months ago

    I upgraded to version 1.1.11 but nothing changes, the width of the left column is always huge compared to the demo ..
    how can you help me ??
    The problem may depend on the toolbar Altervista, at the top header ??

    Theme Author Shaped Pixels

    (@shaped-pixels)

    9 years, 3 months ago

    Sorry, I thought the latest version was 1.0.9 but you are correct, it’s 1.1.11 now.

    Again, the side column and the main content area are sized by percent of whatever the window and/or screen size the site is being viewed in. So on large screens, the side column is going to be bigger, whereas if you shrink the width of your browser window, the side column is going to get smaller. If you have a really big window/screen, your side column is going to be big. This is dynamic widths to accommodate a large variety of screen sizes.

    The pro version has a setting to adjust the side column width, but it also uses percent for sizing, but for Morphology Lite, the sizing is part of this theme version. If you must have this modified, here is the code that you have to customize with CSS:

    @media (min-width: 48em) {
.sidebar {
    width: 30%;
}
.site-content {
    margin-left: 30%;
}
}

@media (min-width: 68em) {
.sidebar {
    width: 18%;
}
.site-content {
    margin-left: 18%;
}
}

    The sizes above are for responsive viewing at varying screen sizes.

    The 48em means, use that size for screens that are at least 768px in width.

    The 68em means, use that size for screens that are at least 1088px.

    You can change these to your needs. Make sure though that the sidebar width and the site-content margin-left are the same. So if you make one 10%, you need to make the other 10%.

    Copy and paste the above code into your Additional CSS tab of the customizer and make your changes.

    Thread Starter danny12

    (@danny12)

    9 years, 3 months ago

    Thanks, it is ok on PC and iPad but i haven’t had the ability to control the mobile version. One last question, for the moment: the gray space under the footer how can I delete it ??

    • This reply was modified 9 years, 3 months ago by danny12.
    Theme Author Shaped Pixels

    (@shaped-pixels)

    9 years, 3 months ago

    The Page Background Colour setting in the colour tab of the customizer will change the light grey space below the footer

    Thread Starter danny12

    (@danny12)

    9 years, 3 months ago

    no, you don’t understand. I don’t change the color, but eliminate the gray background under the footer, how can I do?

    Theme Author Shaped Pixels

    (@shaped-pixels)

    9 years, 3 months ago

    What I said is what you want… the light grey area below the footer is the page background (not the content background). Use that setting I mentioned to change the colour.

    However, if you are referring to “removing or deleting” that bottom area where the page background is exposed, unfortunately that is not possible.

    • This reply was modified 9 years, 3 months ago by Shaped Pixels.
Viewing 12 replies - 1 through 12 (of 12 total)

The topic ‘Left Column width’ is closed to new replies.