Landing page not optimised on mobile devices

[MCassie]

I designed a landing page that looks good on desktop but very bad on mobile devices. The background image is extremely zoomed out and blurry on mobile devices and also most texts are enlarged. What can be done to rectify this?

The landing page link: https://gl-stage.hubspotpagebuilder.com/interedThe look on mobile devicesLook on desktop

[webdew]

Hi @MCassie ,

You need to add the below CSS

@media screen and (max-width: 767px) {

.class-name-here {
background-size: cover;
background-position: center;
padding-top: 55px;
padding-bottom: 55px;
}

}

Hope this helps!

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards. 

[albertsg]

Hello @MCassie , you can solve this type of issues with custom CSS.

Check these links for more information:
https://www.webfx.com/blog/web-design/responsive-background-image/

https://www.w3schools.com/css/css3_images.asp

https://knowledge.hubspot.com/design-manager/create-edit-and-attach-css-files-to-style-your-site