Changing the width of the main column with CSS

  • newfoundsander · Member ·

    Hello forum,

    I would like to change the width of my main column using CSS.
    I have currently done it by giving the content-area a fixed width. However, after making that column 650px wide, the entire column position changed. I ‘fixed’ that with some changes to the relative position of the content-area in the CSS.

    All of this looks fine on a desktop, but it has ruined the responsive views for smaller devices.

    Is there a way I can change the width of the main column to 650px without affecting the responsive views?

    I am using the Writr theme.

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

  • abreujamil · Member ·

    Hi! I can help – could you undo your customizations for me so I can better understand what the default styles are?

  • newfoundsander · Member ·

    Hello abreujamil,

    I am hesitant to undo customizations on the mentioned (live) blog, but I can make a new blog to test the customizations in. A CSS/theme testing ground of sorts.

    I have just created the following:

    http://testingsander.wordpress.com

    I have activated the Writr theme there, without any customization so one can better study the default styles of this theme.

    I look forward to testing out your recommendations there.

    Thanks for your time.

  • michaelvandenberg · Member ·

    Hi Newfoundsander,

    I just gave your page a quick glance, so I’m not sure if this will work. But try setting a max-width of 650px and a width of 100%. This should give your column the desired width and keep it responsive.

    And maybe you could try media queries for the adjustments you’ve made. Something like this: 

    @media only screen and (min-width: 768px) {
.content-area {
top: -800px;
left: 70px;
}

    Nice page btw! I like it better then the original! Good luck! ;)

    Regards,

    Michael

  • abreujamil · Member ·

    Ah – I see! With this new version try:

    #page:before { width: 700px; } #page { width: 1050px; }

    #page:before is the width of the white part behind your posts, and #page is the width of your post content, so you can play around with those.

  • newfoundsander · Member ·

    Thank you gentlemen,

    with your suggestions, I will try to make this work.
    I’ve already applied some new lines in my CSS customization and I can see the effect within the responsiveness. It’s not where I want it to be yet, but it’s much better than it was yesterday.

    Thanks!

  • sarahcastic · Member ·

    Hello I’m having a similar problem. I have changed the content width of my page from 760 (It’s “Blissful Blog” theme) to larger and nothing seems to happen. I would like the content area (specifically the photos, as it is a photography blog) to show up larger. I am not really a computer person and this isn’t really my thing so any help would be appreciated. I’d like the content to be about 25% larger over all.

  • jbruu · Member ·

    @sarahcastic Try this:

    .postarea { padding: 40px 0px; }

    Adjust the 0px to your liking.

    Hope that helps!

  • The topic ‘Changing the width of the main column with CSS’ is closed to new replies.