Help make my website a bit wider

  • Resolved talcioc

    (@talcioc)


    8 years ago

    Hello, my website is https://www.talciocdesign.com and I would like to make it 1000px wide.

    I have tried to write this in Custom CSS (but it didn’t work):
    .container {
    width: 100%;
    max-width: 1000px;
    padding: 0;
    }

    Can you please help make the website 1000px wide?
    Thanks.

Viewing 8 replies - 1 through 8 (of 8 total)
  • ThemeSumo

    (@themesumo)

    To centralize the container you have restricted the width of, you can now add this too:

    .main-section, .container {
    margin: 0 auto;
}

    Hope this helps.

    Thread Starter talcioc

    (@talcioc)

    Thank you for the suggestion but it didn’t work, unfortunately.

    ThemeSumo

    (@themesumo)

    It’s working when I test on your live site.

    You’ve already added the 1000px width restriction, the margin: 0 auto; will simply centralize the element.

    Is there another area you want to limit to 1000px that I am not seeing perhaps?

    Thread Starter talcioc

    (@talcioc)

    When I look at the website, the width is still 720px. I will attach a screenshot so you can see what I mean.

    720 not 1000

    ThemeSumo

    (@themesumo)

    Okay I can see what’s happening now.

    The 1000px max-width isn’t taking effect on your container class, you should add it to the bottom of your Child Theme style.css file, or by using a Custom CSS plugin, this will ensure it isn’t being overwritten by your theme.

    .container {
    max-width: 1000px;
}

    Once you have this style taking effect, your portfolio items will shift into their new positions, like so.

    Hope this helps.

    Thread Starter talcioc

    (@talcioc)

    Okay, it looks like I managed to make the container the width I want, thank you so much!

    Just one more thing, I noticed that now the whole website has that width, how can I make only the homepage portfolio 1000px?

    ThemeSumo

    (@themesumo)

    If you use your browsers Inspect Element feature, or use a tool like Firebug, you can inspect your theme code structure and view the <body> tag of your site.

    WordPress automatically adds classes to it which you can use to target specific pages (amongst many other things) of your site.

    WordPress: body_class

    Your body classes on this page are the following:

    home // the homepage
page // all pages
page-id-2 // this page only
page-template // all pages using any template
page-template-template-portfolio // only pages using the portfolio template

    You can prefix your custom CSS code with something like this for example:

    .page-id-2 .container {
    max-width: 1000px;
}

    Hope this helps.

    • This reply was modified 8 years ago by ThemeSumo. Reason: typo
    Thread Starter talcioc

    (@talcioc)

    Thank you for your help!

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Help make my website a bit wider’ is closed to new replies.

Tags