Mobile Optimization - where is it?

Support
#1

I’ve finished my website design, but it looks horrible on my mobile. I would have thought that X-Theme would be mobiley optimized. I don’t see any way to edit the mobile view so the text is larger, etc. What the heck? This is a deal breaker for me with the X-theme if this is not a feature built in.

#2

Hello @StacieB,

Thanks for writing in! :slight_smile:

The Cornerstone builder of the X theme already comes with a built-in feature to test your website on mobile view. Maybe you’ve missed this but I will guide you from here.

One, is enabling the mobile view option while editing the look of the elements in your page. You can choose any of the resolutions/breakpoints as you test. See screenshot image:

In your case, you need to use the Element CSS feature and Media Queries to achieve the text behavior you wanted as the screen resolution gets smaller. I will share to you resources to check out:

The Element CSS serves as the selector of your text element. Instead of adding a new class to the Customize tab, you can use this awesome feature instead. A sample CSS code on how you can achieve the behavior you want:

@media (min-width: 1200px) {
   $el {
      font-size: 60px;
   }
}
@media (max-width: 1199px) and (min-width: 980px) {
   $el {
      font-size: 40px;
   }
}
@media (max-width: 979px) and (min-width: 768px) {
   $el {
      font-size: 30px;
   }
}
@media (max-width: 767px) and (min-width: 481px) {
   $el {
      font-size: 20px;
   }
}
@media (max-width: 480px) {
   $el {
      font-size: 10px;
   }
}

Each media query pertains to the default resolution/breakpoint in mobile view option. You can edit this code to your needs.

Another way of testing is by using Toggle Device Toolbar in Google Chrome. You can learn more about that here:

Hope this helps.

#3

Great - thank you!!!