Docs

[cxander]

I’m developing my website (www.soundinnovationdj.com) on my desktop. I was away from home today and took my 15″ laptop with me to continue work. To my surprise the website had scaling issue (mostly the home page) where images were cut off on the sides and the images height was increased. While I’m new at web development, I thought the responsiveness of the X theme would have scaled well on a laptop.

So my question is, is there something I need to do to get it to scale correctly? I know you can hide sections based on screen width, but I was only planning on making changes to the site for mobile devices and I thought I could use the same sections for desktops and laptops.

Can anyone please provide me with changes I could make or let me know if my thinking is incorrect.

[Nico]

Hi There,

Thanks for writing in.

You could use @media query to adjust specific class or section in a specific screensize.

For example:

@media (max-width: 979px)
.x-main.full, .x-main.left, .x-main.right, .x-sidebar.left, .x-sidebar.right {
    float: none;
    display: block;
    width: auto !important;
}

Adjust the classes and max-width to adjust where and what screensize you want it to be adjusted.

hope it helps.

Let us know how it goes.

thanks.

[cxander]

So adding this one code is the css of the customizer will correct the issue for all device sizes? I’m sorry but I’m not sure I understand this yet, I suppose it’s over my head and skill. I guess I’m just not sure why all the pages other than my home page seem to scale properly.

[Nico]

Hi There,

There are times that the responsiveness issue might not help or it is not working properly however the code above that I suggested would help you adjust classes that are not working on mobile properly. Please share us your admin credentials so we could check your homepage and suggest the best CSS or adjustment to to do in your setup.

Don’t forget to set it as private reply.

Thanks.

[cxander]

This reply has been marked as private.

[Christopher]

Hi there,

Please add background-position: left center; in first section style field.

Hope it helps.

[Author]

Posts