Need help? Check out our Support site, then


Changing the width of content column (text and images) in 2014 theme

  1. tinylessonsblog
    Member

    I am not a CSS expert, but have researched the forums and have made some customizations. I tried to change the width of the content column by adding this to the CSS
    .site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content { margin: 0 auto; max-width: 680px; }
    In the preview the content column was perfect (680px), but some of the centered full size images were slightly smaller, while some where the size of the text (680px). Any advice on what to add to correct this? Thanks!

    The blog I need help with is tinylessonsblog.com.

  2. This might be overly simple, but did you try just setting the content width to 680px in the box below where you enter the CSS first? I'm fairly new to CSS, but I'm concerned the code you entered may be overkill for what you are trying to achieve.

    As for the images, could you send links to a page where the image looks like you want it to and one where it's too small?

    Thanks!

  3. tinylessonsblog
    Member

    Yes, I added the CSS and also changed the value in the box (changing just the value in the box doesn't do anything by itself, unless the CSS has been changed). I can't send links to pages where the images are different sizes because I had to reverse the CSS changes. It looked too bad, for example in a post where I had 7 full sized images 3 would conform to the text width and 4 would be smaller. Now they all are back to the standard width...The layout looked great with a wider column, larger images and not so much white margin...so I'm hoping on some advice on how to make all the images to conform to the new width. Thanks!

  4. I understand, and was able to recreate the scenario that you are describing. It looks like the photos that are causing problems may have been individually styled with a width of 600px when you uploaded them.

    Here's a screen shot to show you what I mean: https://cloudup.com/cUBLgpHyOmt/f

    You should be able to to edit your individual images to remove that formatting and solve your problem.

    I'll also tag this thread for staff followup in case there is an easier way that I'm missing.

  5. tinylessonsblog
    Member

    Thanks a lot! I do not remember formatting those pics differently from others, but I see what has happened. This gives me a good idea what to look for and experiment further. Thanks again for your help!

  6. My pleasure. Do we still need staff to weigh in or are you good? If we are good I want to untag this post so they can focus their energy where they are most needed :)

  7. tinylessonsblog
    Member

    I couldn't figure out what caused the 600px width, but then thought that I'll be happy with that width of both text and images. Made the change in the CSS and it works well! Little less width than I tried to get, but pictures look much better than previously with standard width. So I'm good. Tanks again.

You must log in to post.

About this Topic