Increase/decrease column width – Visual theme

  • Unknown's avatar
    nilla2014 · Member ·

    Hi,
    I’m hoping someon can help with my 2 questions:

      I’d like to increase the width of my post area (left) column and decrease width of the widget (right) column but still keeping the total width to match my Header photo. Is this possible in the CSS?
      I’d like my nav menu (not Header photo) to display at all times whilst a reader scrolls down the page, i.e. so you don’t have to scroll back to the top of the page to get to the menu.

    Many thanks,
    Nilla

    The blog I need help with is: (visible only to logged in users)

  • staff-jeanpierreac · Staff ·

    Hi!

    I’d like to increase the width of my post area (left) column and decrease width of the widget (right) column but still keeping the total width to match my Header photo. Is this possible in the CSS?

    Well, right now your secondary area (your rigth side widget bar) takes 29.4% of the total width and your content area lets a 31.4% margin. That means there is a 2% gap among those two areas. You can change those parameters with this code (In the example I will use 25% and 27%. You can modify that to adjust to your needs)

    .site-content {
  margin: 0 27% 0 0;
}

.site-main .widget-area {
  width: 25%;
}

    I’d like my nav menu (not Header photo) to display at all times whilst a reader scrolls down the page, i.e. so you don’t have to scroll back to the top of the page to get to the menu.

    You can make your site-navigation bar fixed at the top (or 20px to the top, as in the example). In this case you would need to make it 100% width and to choose a background color (Header background color is not the same as ‘body’ background color). Let’s try this:

    #site-navigation {
  height: 40px;
  position: fixed;
  top: 20px;
  background-color: #212121;
  width: 100%;}

    Decissions to take here:

    1) I would maybe change header backgroudn color to be the same to the ‘body’ just to avoid the ugly navigation-bar color contrast:

    .site-header {
  background: #212121;
}

    2) As you can see, the menu bar (navigation) is overlapping the top of your header photo. If you want to save the whole pic, you would need to move it a little bit downwards:

    #page   {
  position: relative;
  top: 40px;

    I hope this helps you, Nilla. :)
    }

  • Unknown's avatar
    nilla2014 · Member ·

    Thanks for your help! I played around with the columns, but couldn’t get the different %’s to display as the same measurements as the Header photo. Think I’ll leave it as is…haven’t played with the menu yet.

  • Unknown's avatar
    nilla2014 · Member ·

    I wanted the edge of the left and right columns to be directly aligned with the Header photo width, if that makes sense. Adjusting the columns doesn’t take the 2 column areas out to the photo edge.

  • Unknown's avatar
    nilla2014 · Member ·

    Another question, can I make the width of my Header photo wider in the Visual theme, then the columns below wider and to match the new width of the Header photo?

  • staff-jeanpierreac · Staff ·

    Hi again!

    I didn’t understood you. Sorry for that.

    As your header has a max-width of 1020px and your .site-main only 1000px, let’s equal them! You can try:

    .site-header .section {
    max-width: 1000px;
    }

    I hope this helps.

  • staff-jeanpierreac · Staff ·

    You can define the max-width of both areas with .site-main and .site-header .section selectors. For instance:

    .site-main {
  max-width: 1200px;
}

.site-header .section {
  max-width: 1200px;
 }

    Do you mean this? :)

  • Unknown's avatar
    nilla2014 · Member ·

    Yes, that’s what I was after, then I can play around with the column widths.
    I’ve used your last lot of CSS code but at 1100px and this looks good. However, in the Home page, the 3 columns now display with a thick vertical border down the right-side. Not sure how to fix this.

  • Unknown's avatar
    nilla2014 · Member ·

    It looks as if the featured image for the Home posts are hard left justified now.

  • staff-jeanpierreac · Staff ·

    Yes, I see. You could make your pic to use 100% of the width to avoid that:

    .visual-thumbnail img {
  width: 100%;
}
  • Unknown's avatar
    nilla2014 · Member ·

    Thanks loads! I plugged that code in and that works. As a matter of interest, is it possible to have the thumbnail centred instead of 100%?

    Also, do you know whether there is an equivalent ‘WP Visited Countries’ plugin for wordpress.com as in wordpress.org?

  • Unknown's avatar
    nilla2014 · Member ·

    Sorry, with the site menu, I meant a scrolling menu as it’s already fixed at the moment.

  • staff-jeanpierreac · Staff ·

    Glad to see that works!

    About centered thumbnails, you could do it. First you can set picture width (I use 90%) and then a margin. In this margin declaration first number (0) means vertical margin, and second one (5%) horizontal margin, so CSS will apply in this case a 5% margin to the left and a 5% margin to the right, using the whole width (90% pic + 5% left margin + 5% rigth margin).

    .visual-thumbnail img {
    width: 90%;
    margin: 0 5%;
}

    About visited countries plugin: in fact you cannot use plugins in wordpress.com, and there is not a widget to get this functionality.

    I hope this helps!

  • Unknown's avatar
    nilla2014 · Member ·

    Thanks for the code! I’ll play around with it to see what effect looks better.
    Sorry, another question…when I share a post to my Facebook wall from the post’s share button, it displays with my Favicon icon and not the featured image thumbnail. Any ideas?

  • Unknown's avatar
    nilla2014 · Member ·

    Now that I’ve used the new code, I can’t decide what layout looks better – thumbnails to the ends or thumbnails with margins….think I’ll have to show some friends. Thanks again for the great help!

  • staff-jeanpierreac · Staff ·

    @nilla2014 I am glad to read that helped you!

    And if you want my opinion… mmm to the end ;)

  • The topic ‘Increase/decrease column width – Visual theme’ is closed to new replies.