Docs

[Anthony]

Hi,

When I view my site on mobile, there are some elements which are not responsive.

Mainly the headlines and some of the accordion content are the current issues.

I am not entirely sure why this may be happening as I built the pages inside of Cornerstone.

Hope you can shed some light on this.

Thanks,

Anthony.

[Anthony]

This reply has been marked as private.

[Zeshan]

Hi Anthony,

Thanks for writing in!

I’ve checked your site and the issue is because of a few reasons including that you are using large left and right side padding in your sections (see: http://prntscr.com/aosc58). To avoid that, you can either use Hide Based On Screen Width feature in your Section settings (see: http://prntscr.com/96qgos) to show an alternate section on mobiles, or add following CSS code under Custom > CSS in the Customizer:

@media only screen and (max-width: 767px) {
  .x-section {
    padding-left: 0 !important;
    padding-right: 0 !important
  }
}

This CSS will change the padding left and right to 0px on mobiles.

As for the headlines responsiveness, you can use [responsive_text] shortcode to reduce the size of the headlines or text automatically on mobile devices. If you are using Cornerstone, you can add Responsive Text under Settings > Responsive Text (see: http://prntscr.com/7fp66a).

Thank you!

[Anthony]

Sorry for the late reply. Other work sometimes get in the way of this project.

Thanks for the help! You guys sure do know a ton 🙂

[Nabeel A]

Glad we could help 🙂

Cheers!

[Author]

Posts