Making images fit screen width on larger monitors

Store Design
1

hi my page is:
https://lesbrons.com/blogs/emporium
password: sandwich

I’m trying to make the images responsive to larger screen sizes such as a mac. and also responsive on smaller screen sizes so that you dont have to scroll horizontally
any help greatly appreciated

2

@lesbrons

sorry for that issue but can you please share issue image and how do you have like bigger screen?

3

hi ketankumar,
this is how it looks on my current laptop

size1.jpg
size1.jpg500×237 19.1 KB

and this is just a camera shot oh how it looks on my mac

size2.jpg
size2.jpg500×262 16.6 KB

do you know if theres a way to have the images spread out on the larger screen so there is no space on either size of the mac screen?

4

@lesbrons

thanks for more details

do you have like this on your mac?

KetanKumar_0-1627264697570.png
KetanKumar_0-1627264697570.png1920×1080 330 KB

5

yeah i want it to look like that on my mac

6

@lesbrons

thanks for confirm please add this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/stylesheet.css ->paste below code at the bottom of the file.
    this code apply for after 5 - 6 second
.blog-template #content {
    width: 100%;
    padding: 0px 10px;
}
@media screen and (min-width: 980px) {
#blog-articles {margin-left: 0px!important;}
}
@media screen and (min-width: 601px) {
.articles {grid-template-columns: 33.333% 33.333% 33.333%;}
}

After Code Layout.

KetanKumar_0-1627270833275.png
KetanKumar_0-1627270833275.png1920×1080 334 KB

7

hi, i tried this code, but it did not make the images bigger on the mac, it just justified the page to the left but the images are the same size

8

oh it did work!!! i just had to add !important to the last bit of code.

you are amazing i cannot thank you enough!!!

9

@lesbrons

it’s my pleasure to help us