Page not displaying correctly on mobile

Support
#1

Hi,
I have a page that displays properly on a computer and also when the browser window is the same size as a phone display but doesn’t display properly on mobile.

#2

I am wondering how to make it display properly on mobile but still retain the same tight spacing of the page.

#3

Hi @mk_design,

Thanks for reaching out.

The one in your blog page is correct, except that the custom CSS affects all devices. Example, instead of this

.page-id-7381 #x-section-2 .x-column.x-1-2{
    width:49.5%;
    margin-right:1%;
}
.page-id-7381 #x-section-2 .x-column.x-1-2:last-child{
    margin-right:0;
}

It should be like this

@media ( min-width: 768px ) {
.page-id-7381 #x-section-2 .x-column.x-1-2{
    width:49.5%;
    margin-right:1%;
}
.page-id-7381 #x-section-2 .x-column.x-1-2:last-child{
    margin-right:0;
}
}

This will make sure the columns will remain full-width on mobile instead of half with space on the right.

Thanks!

#4

I will experiment with that, thanks : )

#5

Hello There,

You will need a 3rd party plugin to redirect mobile users to a particular url or set of urls.
Perhaps one of this plugins could help you:
https://wordpress.org/plugins/tags/mobile-redirect/

Thank you for your understanding.

#6

Yea I searched the plugins before asking. I take there is nothing built into X theme that will do it?

#7

Hello There,

Regretfully there isn’t a feature in X theme that redirects a user to a different url when viewing in smaller site.

Thanks for your understanding.

#8

Okay, no problem. Thanks.

#9

You are most welcome.

#10

Hi,
I have created another page and don’t understand why the spacing is tight on the bottom images when viewing over mobile. I have played around with the margins and padding but it doesn’t seem to have an effect on mobile view. Can you please let me know how to alter the spacing between the lower eight images when on mobile?
Thanks.

#11

Hi There,

Please add this custom CSS under Theme Options > CSS:

@media (max-width: 767px){
     .x-image.mobile-mg {
         margin-bottom: 25px;
     }
}

After that add the mobile-mg class to your images:

Hope it helps :slight_smile:

#12

Hi,
Thanks for the reply. I am just wondering if there is a way to do it simply without using extra css. It would seem that there should be something in the normal interface that would accomplish it. Also can you please tell me why adjusting the padding or margins on these images doesn’t have any effect when viewing on mobile?
Thanks : )

#13

Hi There,

I counldn’t see any paddings or margins on your images:

Could you please try applying the margin to your images again?

I also see your X theme and Cornerstone plugin are outdated, please update them to the latest version as well:

Let us know how it goes!

#14

Hi,
I have re-added the padding and some margin on the bottom two rows and still the images do not show padding or margin on mobile. There is no space between the images on each of the bottom two rows when viewing on mobile although it shows up on desktop view.
Thanks

#15

Hello There,

I have inspected your page and I can confirm that there is no space between the images in smaller screens. please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

@media (max-width: 767px){
  #cs-content .x-column.x-1-4 img {
    margin-bottom: 30px;
  }
}

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

#16

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.