Full-width, no borders

Sydney Pro
#1

I want the page on https://www.gordonmarcy.com/app/#/ to be full-width (no borders or padding, mobile view). I have tried full-width in the page setup section, but it did not remove borders. I had a full-width plugin, but it wouldn’t work in conjunction with Sydney. I used a CSS hack to force the page full width, but would prefer to not do that, as it is making the content on other pages too stretched, e.g. https://www.gordonmarcy.com/about (mobile view).

CSS
@media (min-width: 1200px) {
.container {
width: 100% !important;
}
}
.page .page-wrap .content-wrapper {
padding: 0 !important;
}

Full-width_no borders_mobile
Full-width_no borders_mobile1080×2220 790 KB

#2

Hello there,

It seems likely the slider container was set to a fixed with on larger screen. Can you set it to 100% from the slider settings?

Regards,
Kharis
aThemes Support

#3

The slider container is part of an app script, bundle.js. The width of the entire app is 800.

#4

I still want to remove borders. Setting page to “full-width” does not remove borders. (see screenshot). Thanks, GM

Want full-width "no borders"
Want full-width "no borders"1080×2220 861 KB

#5

Hello there,

Thank you for getting back.

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .page-template-page_fullwidth .page-wrap .content-wrapper.container {
      padding-left: 0;
      padding-right: 0;
    }

Regards,
Kharis
aThemes Support

#6

Thank you Kharis. I should have mentioned that I only want the setting on a “single page”. What should that CSS look like?

#7

Hello there,

Thank you for getting back.

For specific page, you can mention the page ID selector in the CSS code like this:

    .page-id-789.page-template-page_fullwidth .page-wrap .content-wrapper.container {
      padding-left: 0;
      padding-right: 0;
    }

Replace 789 with page ID number of your page. You can find it when you’re editing the page. It shows in the web browser’s address bar. Or you can use the help of this plugin.

Regards,
Kharis
aThemes Support

#8

This has almost got it Kharis, except for the right-hand border. It’s smaller, but still there. And you can toggle content on the screen back and forth. Should be fixed. (see screenshot)

Mobile view_sydney
Mobile view_sydney1080×2220 672 KB

#9

Hello there,

Which version of mobile web browser are you using – is it the latest?

Can you share a link to that page, so I can take a look directly?

Regards,
Kharis
aThemes Support

#10

Chrome mobile 86.0.440.75

Linke to page https://glorystoneapp.com/podcast-player/#/

#11

Hello there,

Thank you for updating me with the link to your page.

Try adding this CSS code:

    @media only screen and (max-width: 1024px) {

      .page-wrap > .container > .row {
        margin-left: 0;
        margin-right: 0;
        overflow-x: hidden;
      }

      .isolate-gs.gs-app {
        max-width: 100% !important;
      }
      
    }

Let me know how it goes.

Regards,
Kharis
aThemes Support

#12

Kharis,

That worked on the page we were working, but it negatively affected the home page, glorystoneapp.com, and put a border there that shouldn’t be there, so I took it off.

Do I still need this CSS on that page:

.page-id-293.page-template-page_fullwidth .page-wrap .content-wrapper.container {
padding-left: 0;
padding-right: 0;
}

I tried your new fix with it and without it and it didn’t make a difference.

#13

This might be due to special content on that specific page.

Try this code:

    @media only screen and (max-width: 1024px) {

      .page-id-293 .page-wrap > .container > .row {
        margin-left: 0;
        margin-right: 0;
        overflow-x: hidden;
      }

      .page-id-293 .isolate-gs.gs-app {
        max-width: 100% !important;
      }
      
    }

Regards,
Kharis
aThemes Support

#14

Kharis - Unfortunately that CSS “added” border all the way around. GM

mobile_white space
mobile_white space1080×2220 792 KB

#15

Hello there,

As checked, it seems likely you have changed the page layout. And I think you got the extra spaces reduced. Is that correct?

Let me know if you still need any help with it.

Regards,
Kharis
aThemes Support

#16

Yes, I changed the page layout to a basic, clean condition using ELEMENTOR CANVAS TEMPLATE, e.g. no header, no footer. That gave me the full-width, no border effect, BUT, I need the header. So, it’s just a temporary solution. However you can see the exact effect I am seeking.

Questions:

  1. Does the nav bar have a margin that we can change to zero, using css? Could that be the issue?

  2. Could the parent element of the “full-width” template include a left/right margin and overflow: hidden?