Mobile view

Support
#1

Hi,
When entering mobile view of small and smaller the page design looks off.
Elements which were aligned next to each other now are on top of each other.
I want to play with the design to be a little different for this type of view, taking into account the size of the screen. How can I do that without affecting the way it shows up on the desktop?

See for example this page:
http://www.mobileod.s6.fcomet.com/wpmobile/

And this is how it looks in mobile (ignore the colors, it’s from a different identical page that I also need to edit):

Thanks!

#2

Hi there,

Columns displaying stacked on mobile is normal as this is due to the theme being responsive to the screen sizes.

This happen to displays up to 767px of width.

If you want to have a control of the design of the section regardless of the screen width, what I can suggest you to do it so check out the Hide Based on Screen Width feature of the Rows and Columns. Basically, you should be able to set which rows to display on mobile and desktops.

Hope this helps.

#3

Thanks! Does this mean I need to create an alternate page for a mobile view where I hide that page from the desktop, and hide the original page from mobile? I want all elements to show-up, simply want the images to be centered instead of aligned to the left. Also, the text at the top is cut-off in the screen. How can I prevent this?

Thanks!

#4

Hi There,

Alternatively I believe you would have a better design if you had all 3 elements (image, title and text) in a text element. You could have just 1 column instead of two columns and it would respond better on mobile, to do that, you would float the image to the left.

Here is an example of the code you could use. in a 1/1 column text element.

<img class="x-img center x-img-none" style="width:20%; float: left;" src="https://i1.wp.com/www.mobileod.s6.fcomet.com/wpmobile/wp-content/uploads/2017/09/Artboard-15-100.jpg" width="90" height="90"><h2 class="h-custom-headline mtn h3" style="color: hsl(176, 100%, 33%);font-size: 40px;font-family: fira sans;letter-spacing: 0.5px;"><span>BE EFFICIENT</span></h2><div class="x-text p-medium" style="line-height: 1.2;"><p><span style="color: #000000;">Streamline your workflow with hands-free image and video capture, green filter and image annotation, seamless case sharing, and automated visit documentation.</span></p>

Also another alternative would be to hide this section and use the featured list element for mobile.

Hope it helps