Look and feel

Support
#1

I have having a number of issues with a page on my website when it comes to mobile browsing.

When i use the 480 x and smaller view it looks brill but when looking on a mobile it looks awful with the text not fitting in the coloured squares etc.

the page in question is

as most of my business i via mobile browsing it is affecting me dramatically so any help would be very much appreciated

Thanks

#2

Hello There,

Thanks for writing in!

You are experiencing this issue because you have inserted a custom css.

Please note that custom coding is outside the scope of our support. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

To resolve your issue, you must insert your code inside a media css block so that it will only take effect in desktop screens. Perhaps something like this:

@media(min-width: 768px){
  .e679-1 .fresh-pricing-row{
      display:flex;
      flex-flow:row wrap;
      justify-content:space-between;
      align-items:stretch;
      overflow:hidden;
  }
  .e679-1 .fresh-pricing-row [class*="fresh-pricing-col"]{
      float:none;
      width:auto;
      margin:0;
  }
  .e679-1 .fresh-pricing-row .fresh-pricing-col-main{
      flex:3 1 22rem;
  }
  .e679-1 .fresh-pricing-row .fresh-pricing-col-secondary{
      display:flex;
      flex-flow:column nowrap;
      justify-content:center;
      align-items:center;
      flex:1 0 10rem;
  }
  .e679-1 .fresh-pricing-row sup{
      top:-0.25em;
      margin-right:0.15em;
      font-size:0.5em;
      letter-spacing:0;
      vertical-align:super;
  }
}

.x-text {
    word-wrap: break-word;
}

Hope this helps. Please let us know how it goes.

#3

Hey Thanks for getting back to me.

I have not inserted any code any where as i would not know how to do that ?

I did use the fresh pricing template ?

Please help !

#4

Hey @simonmphoto,

Sorry for the confusion. Contents in the Fresh Pricing template should perfectly fit inside the container even in small screen widths.

I’m currently not sure why it breaks on your end but to make the template work for your particular setup, the column must strictly be set to 100% if the breaking point has been reached. In your case, the breaking point is 372px and lower.

Please add this code in your page’s Content CSS. If you’re not familiar about Content CSS, please read the documentation at https://theme.co/apex/forum/t/cornerstone-content-builder-interface-introduction/121

@media (max-width: 372px) {
    .fresh-pricing-col-main,
    .fresh-pricing-col-secondary {
        width: 100% !important;
    }
}

Provided you followed this instruction correctly, you should expecting a similar result like the screenshots below:

Hope that helps.

#5

Thank you that worked :slight_smile:

#6

You’re welcome.

#7

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