Formatting between computer and mobile version of the store

Store Design
1

So I added a picture through the custom liquid and formatted it correctly for the computer viewing but then switching to the mobile view the picture is completely messed up. Is there a way to fix this? Do I change the code in my custom liquid section or in the edit code section of the store?

2

Hi @DarenD10 ;

You have to use the media queries in your CSS file and format it differently. Common media queries are the code below. You can also adjust it dynamically using flex box but it is really depends on how you are writing the code.

@media only screen and (max-width: 950px) {
You CSS code here for screen size 950 or laptop
}

@media only screen and (max-width: 750px) {
You CSS code here for screen size 750 or tablet
}

@media only screen and (max-width: 481px) {
You CSS code here for screen size 481 or mobile
}
3

Is there anyway you can make this simpler haha I have no idea how to code whatsoever!

4

Oh. May we have your website?