Site Responsiveness

[Shawna Frede]

Hello,

I have been having trouble with my site when looking at it on other laptops as the layout seems to shift on different monitors.

Building my site, I have tried to only use % rather than pixels when adjusting content in the visual composer so hopefully that isn’t the issue. Also, when moving to a larger monitor/desktop, the header and footer would not scale with the rest of the content and became disproportionately small. What could be the cause of this? Are there settings I can adjust to help this?

For example, I was working on a page with a colleague in which we wanted the “Order” button to line up with a menu item in the navigation. On my laptop I had lined up the button with the menu item but when it published, my colleague’s laptop displayed this as an error and my edit had pushed it far to the edge of screen.

[Zex]

Hello, Shawna!

I’ve tested your website on Chrome and Firefox browser and I don’t see the problem you described.
Google Chrome browser:
https://mega.nz/#!UV503C5Z!GBktObkRmwL4EzVDD2KT3XjeTbOcicjYQMA8SjkR53g
Firefox browser:
https://mega.nz/#!xQ4gVSJS!S2BktMF1DAuQAeOS0rPa3XRFR-cOeRtvdFMQxUwXhro

What browser / OS your colleague use?

Can you give me an address to the page where the problem occurs?

P.S.: If you want your Header and Footer to be wider, Insert the following code into Customizing->General ->Additional CSS :

.site-header .sticky-header .sticky-header-inner{
    max-width: 100%!important;
}
@media (min-width: 1200px){
#footer-wrapper div.container{
    width: 100%!important;
}
    .footer-widgets{
    padding-right:0px!important
    }
}

Set the max-width and width values per your needs.

Regards

• This reply was modified 3 years, 10 months ago by Zex.

[Shawna Frede]

We are both using Chrome and Windows 10. We discovered the issue actually when extending the screen to a monitor, rather than duplicating it, so we should be good… for now…

Thank you for all of your help!!!

[Author]

Posts