Archived topic
Increase desktop content area width
21 replies · Started by Jon on July 6, 2021
Hi - I'm running adthive and they recommended I:
"Increase your desktop content area width to at least 728px (while keeping your sidebar width at least 300px)"
Can you please instruct me on what I need to add/change in my CSS to make this happen?
Much appreciated! Thanks
Hi Jon,
Can you link us to the site you're working on? So I can inspect the page and base the most appropriate advice specific to your site.
You can use the private information text field to provide the link. :D
Is there a specific page we should be looking at?
The home page is completely built with Elementor so GP doesn't have any control.
My apologies, any content page like https://castandspear.com/podcast/
Hi Jon,
Your current content area is 750pxwhich is larger than 728px.
https://www.screencast.com/t/k66lpX1NWN
And your sidebar is 330px which is larger than 300px.
https://www.screencast.com/t/4MWNjmF6
Your site container max-width is set to 1140px with 40pxpadding all around.
If you'd like to increase the site container max-width, you can do so at customizer > layout > container > container width.
https://docs.generatepress.com/article/container-layout-overview/
Let me know if you need further assistance :)
Thanks for the clarifications!
You are welcome :)
Actually when you look at this page: https://castandspear.com/best-life-jackets/
I'm only seeing a 652px width. How can I increase this width? Thanks
Is your screen very small?
Since site container max-width is set to 1140px, if your screen width is 1000px, then the site container will be 1000px, in this case, your sidebar will be 300px, content will be 700px.
If you want to keep the sidebar at least 300px, and the content at least 728px, then your screen should be at least 1028px. Does it make sense?
Unless we use CSS to move the sidebar below the content as it does on mobile when the screen shrinks.
Hi Ying:
My body.page and body.archive pages are displaying with a 1140px width for my site container, a 750px width for my content area and a 330px width for my sidebar.
However, my body.post pages are displaying with a 1000px width for my site container, a 652px width for my content area and a 228px width for my sidebar.
These results are coming from the same device with the same screen size larger than 1028px. My assumption would be that my theme is set up with slightly different settings for my body.post pages.
How should I fix this? Thanks!
It's because you have this CSS:
https://www.screencast.com/t/d0U4DHwXpUv
Can you check if it's added to customizer > additional CSS?
If not, could you disable your cache plugin so I can see where the code is coming from?
Awesome! Removing the code expanded the main body text area.
Is there a similar code keeping the post sidebar <300px?
Hi there,
you also have this CSS which is setting the sidebar to a fixedf width:
.adthrive-device-desktop .inside-right-sidebar {
width: 320px !important;
}
Hello,
I received the same advice from AdThrive to “Increase your desktop content area width to at least 728px (while keeping your sidebar width at least 300px)”
Can you please instruct me on what I need to do to make this happen?
Here is a post from my blog for reference: https://www.journalbuddies.com/writing-2/technical-writing/
Thanks,
Jill