[Resolved] How do I create a responsive design for mobile?

[Alex]

My site (https://optimalquery.com/) looks fine on desktop, however, it’s too wide on mobile that I have to zoom out to see the full content. What are ways to fix this?

P.s. the site isn’t finished yet

[Alex]

Could the issue be that the global max width is 1200px? But I can’t seem to be able to adjust it only for mobile!

[Fernando]

Hi Alex,

The issue is coming from the Calendar you have.

You’ll need to reach out to the developer of this for assistance.

You can also try to remove the “min-width” setting it has for mobile with this code which you can add through Appearance > Customize > Additional CSS:

@media (max-width: 768px){
    .calendarhero-inline-widget {
    min-width: unset !important;
}
}

[Alex]

Thanks for explaining Fernando 🙂 I’ll see what I can do

[Alex]

I changed the HTML max.width to 100% and I believe that solved it. At least it looks normal on mobile preview. Still waiting for real-time updates

[Fernando]

You’re welcome, Alex!

[Author]

Posts