Edge to Edge is lost with @media queries (smart phone)

I have not changed the BB default global settings for media queries.

I’m using BB with Genesis Magazine Pro and Extender.

I have a BB page template that renders BB edge-to-edge on a desktop.

But on a smartphone, the BB page template is boxed, not edge-to-edge.

How do I fix this?

Thanks!

[Content Hidden]

Hi Kelly,

Interesting, would you mind sharing temp admin info so I can take a look? Please use the private reply option.

Thanks,
Billy

[Content Hidden]

Thanks Kelly, we’re looking into it!

Best,
Billy

Hi Kelly. It looks like your theme is adding some padding to the content area. I think if you override that padding your BB pages should span edge to edge. Give this CSS snippet a try and let me know if this is what you’re going for:

.site-inner {
     padding-left: 0;
     padding-right: 0;
}

if that doesn’t work, you can try adding important tags just to make sure these rules override the original:

.site-inner {
     padding-left: 0 !important;
     padding-right: 0 !important;
}

Thanks so much for checking.

Question - I add that to the media queries?

Yup. Try adding it to the “max-width: 768px” section.

Solved! Thank you soooooooo much!

I added your CSS in 2 places, along with the page class and .fl-builder:

Before Media Queries:

.beaver-page.fl-builder .content,
.beaver-page.fl-builder .content .page,
.beaver-page.fl-builder .content-sidebar-wrap,
.beaver-page.fl-builder .site-inner {
    max-width: 100%;
    width: 100%;
	padding-left: 0;
    padding-right: 0 !important;
}

And in media queries (since that was the original problem):


@media only screen and (max-width: 1023px) {
.beaver-page.fl-builder .site-inner {
     padding-left: 0;
     padding-right: 0 !important;
}
	
}

Excellent! Glad I could help.