Content in Boxes cut in half on mobile

Support
#1

On my website I recently put some content in boxes with shadows and those are not scaling correctly on mobile devices. It basically cuts everything in half. These are the 3 pages with the issue.

http://brain-bodyhealth.com/testimonials/

For example on that last schedule consultation page I used this CSS in the style section of the column the contact form is in.

width: 1000px; margin: auto; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.3);

The boxes on the other two pages were done using different combinations of this exact same CSS. How can I fix this so it will scale correctly on mobile devices?

Thank you!

#2

Hello There,

Thanks for posting in! The contents were cut off because you have set a width of 1000px. To resolve this, you must update the inline css and use this:

width: 1000px; max-width: 100% !important; margin: auto; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 6px 20px 0 rgba(0, 0, 0, 0.3);

max-width: 100% !important; will make sure that if the browser screen is smaller that 1000px, the width will just be 100% of whatever is the browser width.

Please let us know if this works out for you.

#3

That worked perfectly for most of it! Thank you!

The only issue I have now is the headline TESTIMONIALS is getting cut off slightly and not quite centering vertically on my background picture. Everything is centered on PC. Just not on mobile. Here is the link to that page.

http://brain-bodyhealth.com/testimonials/

Any ideas?

Thanks!

#4

Hello There,

I have checked out your Testimonial page. You have inserted a <p> tag inside a heading tag which is not valid.

A heading tag is for heading titles and <p> tag is for paragraph. You must update it and use this:

<span style="text-align: center;">Testimonials</span>

You do not even need the code, only the text. If you want it to align to the center, use the option in the custom headline settings.

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

#5

Thanks. I tried taking out the

tag as you mentioned. I replaced it with the tag you gave me instead. This did not work. So I took out both tags and just used the center option in the custom headline settings as you suggested. Nothing changed. Any other ideas? It still looks like this on mobile.

Thanks again,

#6

Hi There,

Please add the following code to Cornerstone > CSS

@media(max-width: 480px) {
#x-content-band-1 h1.h2 {
font-size: 20px;
}}

Hope it helps

#7

Hi,

I do everything in WPBakery. It would not even let me open my page using Cornerstone. Can I put this code in WPBakery anywhere? If I put it in the site customizer it would affect the entire site right? Not sure I would want that.

Thanks,

#8

Hi,

You can add page id to the code to make it affect that specific page only.

eg.

@media(max-width: 480px) {
      .page-id-4 #x-content-band-1 h1.h2 {
         font-size: 20px;
     }
}

Change 4 with the correct page id.

Please refer to the link below for your guide on how to locate your page id.

#9

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