Docs

[tylervarian]

Hi. I have a site that I have built separate rows for desktop and separate rows for mobile in Cornerstone. While setting up the mobile I select the appropriate “Hide based on screen” size items. This works great on desktop, laptop and mobile. However, on any size iPad (regular and mini) the desktop version is still appearing and looks messed up (that is why I set up the mobile version).

I will give you my login credentials on the next screen so you can see my settings in Cornerstone.

Thanks so much!

Website: http://69.195.124.107/~tudiofi8/

[tylervarian]

This reply has been marked as private.

[Rahul]

Hey There,

Thanks for writing in!

Please add at Appereance > Customizer > Custom > CSS

.x-content-band .x-column {
    vertical-align: middle;
    display: inline-block;
}

.x-content-band .x-column h1 {
    margin-top:0;
}

Hope this helps!

[tylervarian]

Hi Rahul,

I placed the code in and there wasn’t any change on my iPad Mini. Still looks great on my cell phone and desktop and laptop. Any ideas?

Thanks so much!

[Joao]

Hi There,

Would you mind pointing which specific sections you are referring to?

Thanks

Joao

[tylervarian]

Hi Joao,

The frontpage where it says:

Individual Training
Semi-Private Training
Team Training
as well as the section that says Our Trainers section.

Thanks.

[Rupok]

Hi there,

Thanks for writing in! You can control the visibility for any specific screen size with media query as well. Like you can add like this :

@media only screen and (min-width: 768px) and (max-width: 1024px) {
#training{
  display: none;
}
}

Let’s hide the appropriate section with correct section ID. You will find all proportional screen size here – http://mydevice.io/devices/

For example, iPad width should be 1024px in landscape mode and 768px in portrait mode.

Cheers!

[tylervarian]

Got it! Thank you!

[Joao]

Glad to hear we managed to help.

Joao

[Author]

Posts