Overlapping columns on smaller browser window

[gallagherBD]

Hello,

petrillconst.com - this is the website I am talking about.

I am having a problem with two columns overlapping when the browser is not in full view. See image.

On fullwidth mobile and desktop, everything looks great. But if you have the browser window open and you decrease the size, then it overlaps. Please take a look and let me know what is causing it.

[tristup]

Hi @gallagherBD,

Thanks for reaching out.
You need to adjust the font size of the heading using the custom CSS code. You can add any CSS class to the parent column element of WP Bakery and add the custom CSS code based on that class hierarchy.
I have added the class text-small through the browser debugger, and tested the following code.

.text-small
{
    font-size:8px
}

Hope it helps.
Thanks

[gallagherBD]

@tristup

.text-small
{
    font-size:8px
}

I understand this. However, the problem is not all the time. So I do not want the text size to change if someone is looking on desktop view. I want the website to be responsive and the text size changes only on mobile view or if the screen is smaller.

Everything is great on a portrait phone or desktop. The problem is when the site is in any other smaller size.

[gallagherBD]

Also, even with the above-proposed change it still overlaps.

[nabeel]

Hey @gallagherBD,

You can resolve this by splitting your columns from 4 to 2 x 2 because you have very less space for such number of columns. Alternatively you can resolve this by using CSS media queries to break the headings to fit in the provided space for the resolutions between mobile devices and desktop e.g you can add the following code in the Theme Options > CSS:

@media screen and (min-width: 768px) and (max-width:1280px) {
    .shadowboxbox .wpb_text_column h3 {
        word-break: break-all;
        font-size: 16px;
    }
}

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Hope this helps!