Mobile responsive issues, gap under slider and background images not responsive

Support
#1

Hi there,

I have some issues with the X Theme, Integrity stack on this site: http://www.digitalvideopr.co.uk/

On mobile, there is a big space underneath the slider, and the text content in the introduction text box is cut off at the bottom by the next section.

Also, I’d like the images in these sections to be more responsive, rather than just showing a small portion of the image, I tried to use some of the CSS in this thread, but can’t get it working correctly: https://theme.co/apex/forums/topic/background-photos-not-resizing-correctly-on-mobile-not-responsive/page/2/

Thanks in advance for your help.

#2

Sorry, I should have added, on iPhone 6S the content also overlaps on all the pages through the site such as this one: http://www.digitalvideopr.co.uk/video-production-company/corporate-film-production-company/

Many thanks in advance,

#3

Hello There,

Thanks for writing in! Further investigation shows that the white space is because of your custom css. You have added this:

@media (max-width: 480px){
  #x-section-1 {
    height: 300px;
  }
}

This code with give a height of the first section to 300 pixels. Please keep in mind that the slider layout is fullwidth so the height should vary and responsive. You do not need the code above. In order to remove the white spaces, please remove the css code from the customizer.

Hope this helps. Please let us know how it goes.

#4

Hi there, thanks for this, that has worked to remove the gap at the top.

Could you please let me know how to show more than just the middle section of the photos in the sections below on mobile?

On some mobiles it looks good because it shows more of the background image, but looking at the site on the Chrome toolbars “View Responsive Layouts” the images only show the very centre of the image?

Many thanks again,

#5

Hi,

Instead of adding padding to your sections, please add gap elements instead.

Set padding top and bottom of your section to zero then add multiple gaps elements with different sizes and visibility.

That way you can control the height of your section depending on screen width.

Then to make the image show more, you can add this in Cornerstone > Custom CSS

@media (max-width: 480px){
.x-section.bg-image {
    background-size: contain !important;
}
}

Hope that helps

#6

Hi there, thanks for your reply.

So, if I get this straight, I create separate content areas and hide them based upon screen size?

That makes sense to me, I’ll give it a go.

#7

Hi again,

Yes that’s right, you can instead use multiple gap elements in the same content area and hide the gap only based on screens size.

Do let us know how this goes!

#8

Hi again,

Just a quick one, I have created a section that is only viewable on mobile, however, I can’t see the layer to edit it in Cornerstone now? I can see the section in the column on the left, but it’s hidden in the editor on the right (as I’m on a desktop), how can I see it to edit it?

I tried to edit it on an iPad too, but sadly Cornerstone doesn’t scroll on iPad.

Many thanks,

#9

Hi there,

There are two options, you could change the display view in Cornerstone to mobile so that the section will be visible or you can view the page in Skeleton mode.

Hope this helps.