Solved

making images fit screen width on larger monitors

lesbrons
Pathfinder
153 0 54

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

Accepted Solution (1)
KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@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

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 8 (8)

KetanKumar
Shopify Partner
36839 3635 11972

@lesbrons 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lesbrons
Pathfinder
153 0 54

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

 

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

 

size2.jpg

 

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?

KetanKumar
Shopify Partner
36839 3635 11972

@lesbrons 

thanks for more details 

do you have like this on your mac?

KetanKumar_0-1627264697570.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lesbrons
Pathfinder
153 0 54

yeah i want it to look like that on my mac

KetanKumar
Shopify Partner
36839 3635 11972

This is an accepted solution.

@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

 

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
lesbrons
Pathfinder
153 0 54

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

lesbrons
Pathfinder
153 0 54

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

you are amazing i cannot thank you enough!!!

KetanKumar
Shopify Partner
36839 3635 11972

@lesbrons 

it's my pleasure to help us

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing