[Resolved] Space on right side of page on mobile

[Leanne Foulger]

Hi

Please look at this page. https://byronrawlins.com/africa/

On a desktop it looks great. But on my cellphone there is an empty space to the right of the photo gallery.

I tried resizing the images and it makes no difference.

What do you suggest?

Thanks

[Elvin]

Hi,

The page content seems to be causing this issue because it is exceeding beyond 100% of the viewport’s width.

That said, try adding this CSS:

@media (max-width:768px){
.vc_row {
    margin-left: auto;
    margin-right: auto;
}
.vc_custom_1605417564595 .vc_column_container {
    padding-left: 0;
    padding-right: 0;
}
}

A wise man once said:
"Have you cleared your cache?"

[Leanne Foulger]

Thank you. That solved the problem in the header and footer. But where the photo gallery (squares)… there is still a small black space to the right on my cellphone.

Can we fix this too?

[Leanne Foulger]

Actually, the space is on the right and left.

[Elvin]

Ah yes, that’s coming from the gallery’s padding.

try replacing this:

@media (max-width:768px){
.vc_row {
    margin-left: auto;
    margin-right: auto;
}
.vc_custom_1605417564595 .vc_column_container {
    padding-left: 0;
    padding-right: 0;
}
}

with this:

@media (max-width:768px){
.vc_row {
    margin-left: auto;
    margin-right: auto;
}
.vc_custom_1605417564595 .vc_column_container>.vc_column-inner{
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}

A wise man once said:
"Have you cleared your cache?"

[Leanne Foulger]

That did not work. Sorry.

There is black space on either side of the photo gallery and I have it set to 100% width.

[Elvin]

There is black space on either side of the photo gallery and I have it set to 100% width.

This part is pretty tricky because a third party plugin (Modula Gallery) with a script that moves elements around for responsiveness.

Have you tried refreshing/resizing the page after applying the padding-left: 0 !important; & padding-right: 0 !important;? https://share.getcloudapp.com/o0um5wwJ

A wise man once said:
"Have you cleared your cache?"

[Leanne Foulger]

Yes, I refreshed the page. The black space is still there.

[Elvin]

How are you adding the CSS? I can’t seem to find it being applied on the site.

As shown here: https://share.getcloudapp.com/xQuAyXGo

It only shows the padding applied by js_composer’s css (Visual Composer). Try removing the left and right padding from this plugin’s UI.

vc_column-inner like other .vc_ prefixed CSS selectors are added by Visual Composer.

Note: Modula Gallery and Visual Composer are third party plugins that are out of our scope of support. It may be best to contact their support regarding this matter.

A wise man once said:
"Have you cleared your cache?"

[Leanne Foulger]

I will contact the plugin developer for help.

Thanks

[Elvin]

No problem. 🙂

A wise man once said:
"Have you cleared your cache?"

[Leanne Foulger]

When I use this

@media (max-width:768px){
.vc_row {
margin-left: auto;
margin-right: auto;
}
.vc_custom_1605417564595 .vc_column_container>.vc_column-inner{
padding-left: 0 !important;
padding-right: 0 !important;
}
}

It works great for the rest of the page on mobile, but when I turn the phone sideways, the black space comes back all the way down the right side.

Can we fix this?

[Elvin]

try adding and (orientation: [device orientation]) on your @media rule.

/*For mobile landscape*/
@media (max-width:768px) and (orientation: landscape){
.vc_row {
margin-left: auto;
margin-right: auto;
}
.vc_custom_1605417564595 .vc_column_container>.vc_column-inner{
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/*For mobile portrait*/
@media (max-width:768px) and (orientation: portrait){
.vc_row {
margin-left: auto;
margin-right: auto;
}
.vc_custom_1605417564595 .vc_column_container>.vc_column-inner{
padding-left: 0 !important;
padding-right: 0 !important;
}
}

This isn’t guaranteed to work as it is possible that Visual Composer and Modula Gallery use scripts that may override this or make things look weird.

A wise man once said:
"Have you cleared your cache?"

[Leanne Foulger]

The code is there. I went to Customize… and put it in the Additional CSS field.

The new code did not work.

[Elvin]

Strange.

It may be best to check Visual Composer regarding this as the issue comes from their containers adding unwanted spaces from paddings .vc_column_container>.vc_column-inner.

Unfortunately, as previously mentioned, third party plugins are out of the scope of our support.

A wise man once said:
"Have you cleared your cache?"

[Author]

Posts