- This topic has 16 replies, 2 voices, and was last updated 3 years, 4 months ago by Elvin.
-
AuthorPosts
-
November 15, 2020 at 12:48 pm #1532639Leanne
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
November 15, 2020 at 3:00 pm #1532718ElvinStaffCustomer SupportHi,
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; } }
November 15, 2020 at 3:19 pm #1532730LeanneThank 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?
November 15, 2020 at 3:28 pm #1532734LeanneActually, the space is on the right and left.
November 15, 2020 at 3:29 pm #1532737ElvinStaffCustomer SupportAh 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; } }
November 15, 2020 at 3:38 pm #1532744LeanneThat did not work. Sorry.
There is black space on either side of the photo gallery and I have it set to 100% width.
November 15, 2020 at 3:46 pm #1532750ElvinStaffCustomer SupportThere 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/o0um5wwJNovember 15, 2020 at 3:49 pm #1532753LeanneYes, I refreshed the page. The black space is still there.
November 15, 2020 at 4:03 pm #1532758ElvinStaffCustomer SupportHow 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.
November 15, 2020 at 4:05 pm #1532759LeanneI will contact the plugin developer for help.
Thanks
November 15, 2020 at 4:08 pm #1532764ElvinStaffCustomer SupportNo problem. 🙂
November 15, 2020 at 4:39 pm #1532786LeanneWhen 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?
November 15, 2020 at 4:52 pm #1532794ElvinStaffCustomer Supporttry 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.
November 15, 2020 at 5:27 pm #1532809LeanneThe code is there. I went to Customize… and put it in the Additional CSS field.
The new code did not work.
November 15, 2020 at 6:15 pm #1532822ElvinStaffCustomer SupportStrange.
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.
-
AuthorPosts
- You must be logged in to reply to this topic.