Site logo

Archived topic

Responsiveness has broken

3 replies · Started by troyw on November 3, 2022

Viewing posts 1–4 of 4

Hey team,
Not sure why, but my website is suddenly not working responsively. If you check the Home Page for example, you will see that it is not presenting well on mobile devices.

I have identified the CSS causing this to happen, but cannot seem to change the CSS to stop it from happening.

.wptravel-layout-v2 #page #content {
	display: flex;
	flex-wrap: wrap !important;
}
.wptravel-layout-v2 #page #content .wp-travel-toolbar{
	display: block;
	flex-basis: 100%;
}

This CSS is somehow affecting the blocks and thus breaking the Mobile sizing, but I don't know why?

Any idea how I can fix this?

Thanks

Hi Troyw,

How about placing them inside a Media Query so they don't apply on Mobile view?

Example:

@media (min-width: 769px) {
    .wptravel-layout-v2 #page #content {
        display: flex;
        flex-wrap: wrap !important;
    }

    .wptravel-layout-v2 #page #content .wp-travel-toolbar {
        display: block;
        flex-basis: 100%;
    }
}

Hahaha, yes that is it Fernando, thank you.

You're welcome Troyw!

This archived topic is closed to new replies.