Change width of body

Hi

Is it possible to change the default width on pages/body from something between full width and full width expanded
my website is www.becht.dk

Regards
Peter

Hello peter,

You can change the default content area width with this CSS code:

    #content > .container {
      width: 100% !important;
    }

To change it on specific mobile devices, use this code:

    @media (min-width: 1200px) {
      #content > .container {
        width: 100% !important;
      }
    }

    @media (min-width: 992px) {
      #content > .container {
        width: 100% !important;
      }
    }

    @media (min-width: 768px) {
      #content > .container {
        width: 100% !important;
      }  
    }

To apply extra custom CSS code to your site, add it to Appearance > Customize > Additional CSS from dashboard.

Regards,
Kharis

Hi Kharis

Thanks. But its more about to enlarge the content from 1200 px to something between 1200 and 1960 px.on large devices_ Is this possible ?

Best Regards
Peter

Hello Peter,

You’d use this code:

    @media (min-width: 1201px) {
      #content > .container {
        width: 1200px !important;
      }
    } 

Regards,
Kharis

Hi Kahris

Thanks again. It seems not to work. If I change the width to for example 1600, nothing happens.
Please let me know if I missunderstod your input.

kind regards
Peter

I visited your site once again; it looks like you’ve removed the last CSS code I suggested. What’s your screen resolution? https://www.whatismyscreenresolution.com/

Regards,
Kharis

Hi Kharis

Thanks for your reply. Sorry but it is my_ website www.becht.se _ that Im changing.
The page projekt _http://www.becht.se/projekter/ _ reviews a try out with full width expanse and changed page builder px to right and left. My max widht is 1920 X 1080 px. I hope instead on an easier way to change the default width.

Regards Peter

Hello there,

Viewing the source code of your site, I found some lines that indicating that your site has been cached. Please flush it and reload your site. Note that applied cache prevents new code changes/additions to take effect until it’s flushed.

Regards,
Kharis

Hi Kahris

Thanks again. I have flush al cache both on computer and on my server host. But Im sorry it still dont works. Maybe Im doing something wrong. Do you have an idea of what to do ?

Kind regards
Peter

Hello Peter,

To help you easier identify whether the applied code takes effect or not, try adding a red border and play around with other width values. For examples:

    @media (min-width: 1201px) {
      #content > .container {
        width: 1250px !important;
        border: 10px solid red;
      }
    }

Let me know if this code really doesn’t meet your need. If possible, take a screenshot and put some descriptive annotations to help me understand the goal you want to achieve.

Regards,
Kharis

Hello Kharis
And thanks a lot. Sorry for my late response. The red ine moves nice where I put a new px. - but the row or widge dont follow. They are still in same widt as standard/fulll widht or full widht expanse.

So to get the broader full widht I use full widht expanse and moved the actually rows and pictures indivual by padding left and right etc._se my web site www.becht.se. And It looks ok. on the big screen.

But why I asked is because that its not responsive then for instans to ipad landscape. On minor devices the mobile padding can be put to 0. But for Ipad landscape this possibility is missing. The picture looks pretty strange moving the text/picture into the middle.

Maybe its more a question about how to get rid of the padding in Ipad landscape.

If possible please give me an answer of what and how you think is best to do.

Kind regards
Peter.