CSS CODE FOR WIDGETS BLOG POST SIZE

  • Unknown's avatar
    lifestylesky · Member ·

    Hello! am looking for a CSS code to make my widgets 2 inches larger. Also if possible to get a CSS code to make my blog posts 1 inch larger as well. Site is http://www.lifestyleky.com Thank you so much!! Masha

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

  • Unknown's avatar
    lifestylesky · Member ·

    Hello,

    I got the answer below. But when I increased the pixels it made my blog images/posts a little smaller. I don’t want to increase my logo size but now would just like to increase the size of my blog posts. Thank you.

    div#page-liner {
    max-width: 1600px;
    }

    You can adjust the maximum width value to your liking; this will allow your blog to be wider on larger screens.

    If you want to adjust the relative sizes of your posts and the sidebar, you can add this to your CSS:

    div#tertiary {
    width: 35%;
    }

    .right-sidebar #primary {
    width: 60%;
    }

    Below is how it is now.

    div#page-liner {
    max-width: 1350px;
    }

    div#tertiary {
    width: 25%;
    }

    .right-sidebar #primary {
    width: 73%;
    }

  • Unknown's avatar
    thesacredpath · Member ·

    Hi, give the following a try and see what you think. 

    #page-liner {
    max-width: 1600px;
}
#tertiary {
    width: 25%;
}
.right-sidebar #primary, .left-sidebar #primary {
    width: 75%;
}
.widget_image img {
    width: 100% !important;
}
.widget_twitter_timeline iframe {
    width: 100% !important;
    max-width: 100% !important;
}
#primary {
    margin-right: 0;
}
  • Unknown's avatar
    lifestylesky · Member ·

    Hello,

    Thank you so so much!! Really appreciate your help!

    When I do the page-liner, it stretches my logo. Also when I make the side bar widgets bigger it makes my blog post images smaller as well as shrinking my about page info. It’s weird. Is there a way to just increase my widget side bar size without affecting the rest of my website?

    Thank you again!

    Masha

  • Unknown's avatar
    thesacredpath · Member ·

    Masha, we can’t make the widgets wider without making the content narrower, or increasing the overall width of the theme since there is a parent div around all of them. You can try this, which widens things even further and then sets a maximum width on your header of 70%. 

    #page-liner {
    max-width: 1700px;
}
#tertiary {
    width: 40%;
}
.right-sidebar #primary, .left-sidebar #primary {
    width: 55%;
}
.widget_image img {
    width: 100% !important;
}
.widget_twitter_timeline iframe {
    width: 100% !important;
    max-width: 100% !important;
}
#primary {
    margin-right: 0;
}
#masthead {
	max-width: 70%;
	margin-left: auto;
	margin-right: auto;
	float: none;
}
  • Unknown's avatar
    lifestylesky · Member ·

    Thank you so much for all your help!

    I will try the codes and try to adjust the %. It still does shrink the posts in my other pages. But I will see if I can adjust it…..

    If all else fails, I might move to wordpress.org for HTML

    Thank you so much for all the help!!!

    Masha

  • Unknown's avatar
    thesacredpath · Member ·

    You are welcome Masha, and with a self-hosted installation you would have a similar problem in that the overall parent div would still be there and limiting things to within that area, so it would have to be expanded and then adjustments made to the elements inside of that parent div to get the look you wanted.

    Let me know if this is more in what you are wanting and we can go from there.

  • Unknown's avatar
    lifestylesky · Member ·

    Thank you so much.

    I actually found a website that I like with a similar design. She has larger widgets/side bar with the same size blog posts/images as mine. I know she is on wordpress. Any ideas if it’s a customized theme and if there are codes to make mine look similar in terms of the layout?

    http://harperandharley.com

    Thank you again!

    Masha

  • Unknown's avatar
    thesacredpath · Member ·

    Masha, give the following a try. I copied, as close as I could, the widths on the site you reference. After adding the following CSS, in the Media Width field below the CSS edit area, enter 1028. 

    #page-liner {
    max-width: 1700px;
    width: 100%;
}
#tertiary {
    max-width: 320px;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
}
.right-sidebar #primary, .left-sidebar #primary {
    width: 100%;
    padding-right: 26px;
    max-width: 1054px;
}
.widget_image img {
    width: 100% !important;
}
.widget_twitter_timeline iframe {
    width: 100% !important;
    max-width: 100% !important;
}
#primary {
    margin-right: 0;
}
#masthead {
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
    float: none;
}
  • Unknown's avatar
    thesacredpath · Member ·

    And yes, the theme they are using is either a customized theme, don’t know which, or it was built for them as a custom theme from scratch. It is a self-hosted WordPress site and not hosted here at WordPress.com.

  • Unknown's avatar
    lifestylesky · Member ·

    Thank you so much!

    I tried it and it looks pretty good…the only thing is…. it shrinks my blog posts on other pages by almost 50%. Is there a way for me to keep my other pages size as is?

    Thank you again for all your help.

    Masha

  • Unknown's avatar
    thesacredpath · Member ·

    If you only want this applied to your home page, what we can do is to use the “home” CSS body class, defined in the opening body HTML tag for the home page and precede the CSS selectors with that. Give this a try. 

    .home #page-liner {
    max-width: 1700px;
    width: 100%;
}
.home #tertiary {
    max-width: 320px;
    width: 100%;
    padding-right: 0;
    padding-left: 0;
}
.home .right-sidebar #primary, .home .left-sidebar #primary {
    width: 100%;
    padding-right: 26px;
    max-width: 1054px;
}
.home .widget_image img {
    width: 100% !important;
}
.home .widget_twitter_timeline iframe {
    width: 100% !important;
    max-width: 100% !important;
}
.home #primary {
    margin-right: 0;
}
.home #masthead {
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
    float: none;
}
  • Unknown's avatar
    lifestylesky · Member ·

    Thank you so so much for all your help, and thank you for your time!

    I am going to try the codes and play around with the size.

    You are the best!

    Appreciate all your help!

    Masha

  • Unknown's avatar
    thesacredpath · Member ·

    Masha, you are welcome and please let us know if you have further questions.

  • The topic ‘CSS CODE FOR WIDGETS BLOG POST SIZE’ is closed to new replies.