CSS Code for extending content width

  • Unknown's avatar
    53bg · Member ·

    Hello,

    I have the Watson theme and have upgraded to Premium. I am new to wordpress and CSS formatting. My question today is my text margins don’t align with my image. I understand I can align the image and wrap the text when inserting media, but if I want the image to be inserted as a “featured image” I believe I lose the alignment option. How can I adjust my text to extend to the far right margin of the image associated with the post? Thank you .

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

  • miguelcsf · Staff ·

    Hi there,

    Thanks for bringing this up. It might be a problem with the theme itself. We’re looking at it!

  • Unknown's avatar
    designsimply · Member ·

    The Watson theme has some unique design elements that shift different parts of the content outside the typical margins for the post. You can see it a little more clearly in this example post from the Watson demo site because it has a blockquote section that shifts to the left in addition to the featured image access to the right:
    http://watsondemo.wordpress.com/2012/08/09/wild-question-marks-and-devious-semikoli/

    You can adjust that manually using custom CSS if you’d like.

    Here is an example to get you started if you want to adjust the image size to match the current base text column width:

    .feature img {
	width: 492px;
	height auto;
	padding-right: 115px;
}

    You could also adjust the text column, but that might cause some unintended consequences if you ever do use some of the content types that are meant to fall outside of the regular text margins.

  • miguelcsf · Staff ·

    Hey again,

    You may also like this other solution, which keeps the responsiveness of the layout (i.e., the fact that the layout readjusts itself according to the dimensions of the browser window):

    @media screen and (min-width: 900px) {
    figure.feature {
        float: none;
        margin-left: auto;
        margin-right: auto;
        max-width: 492px;
    }
}
  • Unknown's avatar
    designsimply · Member ·

    Thanks @miguelcsf! Your solution is better. :)

  • Unknown's avatar
    pinkycrag · Member ·

    Hey! I’m new here and i don’t really know how to go about, please tell me how to make my worldpress.com blog appear in search engines so that i get traffics to my new posts and updates? Please help me with the code or tutorial. Thanks.

  • Unknown's avatar
    timethief · Member ·

    @pinkycrag
    You are thread hijacking by posting an off-topic question into this thread. Please click this link and start your own thread > https://en.forums.wordpress.com/?new=1

  • Unknown's avatar
    timethief · Member ·

    P.S. Also remove all those irrelevant tags form the sidebar of this thread please.

  • The topic ‘CSS Code for extending content width’ is closed to new replies.