Mobile view issues

Support
#1

I have got my website how I want it to look on desktop however there are a few issues with the mobile view I hope you can help with…

  • The social media icons are not centred:

  • The counter isn’t loading:
  • There is no gap between “Continents” and “Where We’ve Been”

#2

Hello @diytravelhq,

Thanks for asking. :slight_smile:

  1. I suggest you to move social icons to a new section. After that inspect the section and under Formatting > Text Align select Center Icon.

  1. Test for a plugin conflict. You can do this by deactivating all third-party plugins, and see if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
  2. Actually in Where We’ve Been headline you have used mtn class which removes top margin. Either you can remove the class or add class name under Customize > Setup > Class and then add following CSS under X > Theme Options > CSS:
@media only screen and (max-width: 600px) {
.alert-name {
    margin-top: 20px !important;
}
}

Feel free to change class name alert-name to whatever you like.

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

#3

Thanks.

1 - I can’t find the Graphic Icon.

2 - Where do I find “Customize > Setup > Class”. In the Section, Row, Classic Custom Headline or somewhere else?

I want to keep the mtn class.

#4

Hi Sheena,

  1. I am not sure what are you talking about. It seems that you used the icon element to add the social media icons. As my colleague suggested you need to add a separate section in the Cornerstone and move the icons there and then make the section itself centered. If you want to know more about the sections please read this article:
  1. I have another suggestion in this case. I suggest that you clone the same section and make it visible only for mobile and the original one visible only for the desktop. Then you can remove the mtn class for the mobile.

Here is how to hide/show the sections for different device sizes:

Thank you.

#5

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