CSS Code for extending content width

  • Author
    Posts
  • #1322183

    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 hausvonsalz.com.

    #1322367

    miguelcsf
    Staff

    Hi there,

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

    #1322370

    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.

    #1322375

    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;
        }
    }
    #1322447

    Thanks @miguelcsf! Your solution is better. :)

    #1322458

    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.

    #1322459

    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

    #1322460

    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.