Cornerstone Issues (Mobile) and other things

[Zinkles]

Hi, I am using the CORNERSTONE SLIDER and it is not looking correct on mobile. It’s a mess really. Please see: www.aliveandshine.com

Also is there a way to make instead of one long row of icons and such, it look more like the desktop site in certain ways? Just everything doesn’t seem to look right on mobile. lol.

I tried to talk to someone about this before, and gave login credentials, but no one understood that the wp-admin for this website login IS NOT /wp-admin it was changed to /security for security purposes.

Thank you!

[marc_a]

Hey Zenia,

Thanks for reaching out!

Would you mind sharing more information on what’s your expected output of your slider in the mobile view? In that way, we can help you on how to attain that layout.

Cheers!

[Zinkles]

Basically, if you go on the website, you can see (for mobile) it is all deformed. lol. It’s pretty evident. The slider just looks a mess. and also the Yoga, Meditation, and Lifestyle buttons scrolling through them (and all the other ones) instead of being next to each other. All of this for mobile.

[ruenel]

Hello Zenia,

You are having the issue because of your maximum width settings in the DIV element.

Using a maximum width of 900 pixels is only good for larger screens. You should adjust it on smaller screens and use percentage.

If you are not familiar with the Responsive Styling, please check out this documentation first:

• Responsive Styling | Themeco Docs

And you also need to change the background positions to adjust the image of the woman in each of your slide. Please check out this article to have a better understanding of how the background image and its positioning works.

• https://www.w3schools.com/cssref/pr_background-position.asp
• https://css-tricks.com/almanac/properties/b/background-position/

Best Regards.

[Zinkles]

I don’t think the image is the issue, because I have another website where the images show up fine. It just needs to be shorter for mobile. How can that be done?

[ruenel]

Hello Zenia,

Yes, you are correct. The images are not the issue. The thing is, you use the images as a background image of each of your slide. Using an image as a background is great till you want a particular object in the image to be displayed properly in a particular screen size. The position of that object is difficult to control which is why it is best that you use an Image element inserted in each of your slides. Please check out the URL in the secure note for my demo slider using an Image element.

• See the secure note

Best Regards.