About main content width

  • Author
    Posts
  • #127943

    Hi! I just started my blog and was wondering if I can have my images to be 1000 px in width, and if it’s possible with css do I need a Premium account? I currently have a Personal one, thanks!
    Sheila.

    The blog I need help with is oflahertyphotography.blog.

    #128126

    ricardpriet
    Theme Author

    Hi there, thanks for writing and using Rosalie :)

    Yes, unfortunately you need to be able to add this custom CSS for your request:

    @media (min-width: 992px) {
            #primary {
            margin: 0 auto;
            width: 1030px;
            float: none;
        }
        img.size-full, img.size-large {
            width: 100%;
        }
    }

    However those image possibly get pixeles because WordPress is sending them at 750px even if you have uploaded them bigger.

    Hope this helps :)
    Ricardo P. from SiloCreativo

    #128129

    Thanks! that helps a lot!
    Since I just started the blog I wouldn’t mind to upload the images again to make them 1000px, I’m just glad it can be done :)
    thanks!
    Sheila.

    #128131

    ricardpriet
    Theme Author

    Hi Sheila,
    yes are welcome :)

    yes, but despite the fact that those images were upload again, it is possible that WordPress send the images cropped to 750px width (which was your old main content width) because the CSS modifications will apply after the images are sent by the server.

    Just to let you know.
    Thanks!
    Ricardo P. from SiloCreativo

    #128161

    Hey! sorry again, but just to clarify before I make a big purchase with Premium, are you saying that even if I change to premium to use CSS and modify the width and then upload the images again there’s a chance it still might not work?
    All I want is a theme that allows me to have my images at 1000px width, if this one doesn’t let me I’ll need to find another (even tho I love this one!)
    thanks for all your help!
    Sheila.

    #128199

    ricardpriet
    Theme Author

    Hi Sheila,

    yes, Unfortunately the theme set the content width in its settings to 750px, and WordPress sends the images to that resolution. After that, the CSS will be apply. So the image will grow from 750px to 1000px, so it gets pixelated.

    Example. this is currently a post from your site:
    http://imagizer.imageshack.com/img923/6993/9ZTFa1.jpg
    and after the change, you will have this:
    http://imagizer.imageshack.com/img923/9160/Y2a9vG.jpg

    As you can see the image will be 1000px of width, but is the same image (original width 750px) that grows until fill the space.

    Hope this helps you understand how it will work :)
    Please, ask us any doubt related to this if something is not clear.
    Thanks, Ricardo P.

    #128201

    Hey! thanks for your patience! this is the first blog I’m actually taking serioursly, and I’m still trying to figure it out.
    So I guess then 1000px is out, I decided to add a sidebar and maybe get the images to 800px or 825px instead and see how it looks, I’m pretty happy with this theme overall so I’m going to make it work :)

    #128229

    ricardpriet
    Theme Author

    Yes, 800px will be better.

    Please, keep us posted if you need more help :)
    Thanks,
    Ricardo P.

    #128308

    Hi! since this topic isn’t closed I figure it’s fine to ask here again? so, I started the blog from scratch and I added the CSS code you posted to change the width, I changed it to 850px but it seems I don’t have any room for a sidebar, is there a way to change this or should I use a lower width? like 800px, thanks!!

    #128309

    ricardpriet
    Theme Author

    Hi there,
    yes, no problem about posting here :)

    Let’s try this: (please, delete the previous CSS you have added)

    #content .container {
        width: 100%;
    }
    #primary {
        margin: 0 auto;
        width: 100%;
        float: none;
    }
    @media (min-width: 880px) {
        #primary {
            margin: 0 auto;
            width: 850px;
            float: none;
        }
    }
    
    @media (min-width: 992px) {
        #secondary {
            margin: 0 auto;
            width: 850px;
            float: none;
        }
    }
    
    @media (min-width: 1200px) {
        #content .container {
            width: 1170px;
        }
        #primary {
            margin: 0;
            width: 850px;
            float: left;
        }
        #secondary {
            margin: 0;
            width: 320px;
            float: left;
        }
    }

    And let us know.
    Thank you!
    Ricardo P.

    #128310

    Thank you!! that looks great!
    Just two little things I need to adjust, if it’s not a bother, the text doesn’t align with the image (it goes further than the column it seems), dont know how to fix that and can you tell me how to make a little more space between the main content and the sidebar? it seems all smooshed together, just a little space would be great, again, thank you!

    #128311

    ricardpriet
    Theme Author

    Hi! Nice to hear this worked.

    To have your images set at 850px, add this:

    #primary .hentry img.size-full {
        width: 100%;
    }

    And about the sidebar, this is a bit tricky. This is the equation:
    Total width space = 1170px
    #primary = 850px
    #secondary = remaining space. (1170 – 850px) =320px

    So you can subtract some px for the margin-left property, keeping the total amount in 1170px. For example:

    #primary = 850px
    #secondary margin-left = 20px
    #secondary = 300px

    To get this, you have to change the last section of the previous CSS shared:

    @media (min-width: 1200px) {
        #content .container {
            width: 1170px;
        }
        #primary {
            margin: 0;
            width: 850px;
            float: left;
        }
        #secondary {
            margin: 0;
            width: 300px;
            margin-left: 20px;
            float: left;
        }
    }

    Play with the number if you want more or less space.
    Hope this helps :)
    Ricardo P.

The topic ‘About main content width’ is closed to new replies.