How to change image width in sub pages of Grid theme?

Solved
byFoke_dev
Tourist
6 1 3

Hi All,

I'm trying to change the image width on some of the sub pages of our site for example: https://byfoke.com/pages/corporate-gifting-1 it would be great to increase the width so it was more like the header on the homepage. Any advice would be very much appreciated.

Many thanks

KetanKumar
Shopify Partner
20578 2130 7791

@byFoke_dev 

sorry for that your image to smaller can you please upload bigger image

KetanKumar_0-1626236089511.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
0 Likes
byFoke_dev
Tourist
6 1 3

Hi Ketan, thanks for getting back to me - I have added a larger image but it stills seems to be constrained - i'd to be able to have it as full page width if possible - or at least to have it display at its source width? Many thanks

0 Likes
KetanKumar
Shopify Partner
20578 2130 7791

@byFoke_dev 

do you have like this?

KetanKumar_0-1626253764080.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
0 Likes
byFoke_dev
Tourist
6 1 3

Hi Ketan,

That looks much better! Is there a piece of code I can add to the other subpages as well so the image displays at full size? such as these page:

https://byfoke.com/pages/we-are-foke

https://byfoke.com/pages/bespoke-gifting-for-your-brand

Thanks so. much for your help!

KetanKumar
Shopify Partner
20578 2130 7791

@byFoke_dev 

thanks for confirm please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

.template-page .page-content, .template-page .page-content>:not(.highlight) {max-width: 100%;}
.template-page .page-content>:not(.highlight) img {
    width: 100%;
    height: 100%;
}

 

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
byFoke_dev
Tourist
6 1 3

This is an accepted solution.

Ketan you are an absolute legend! That is working perfectly! Thank you so much for your help and have a great week:) *****

0 Likes
byFoke_dev
Tourist
6 1 3

Hi Ketan,

 

Hope all is well - thank you agian for sorting our issue with being able to display full width images on our subpages - quick question is it possible to be able to display the images smaller aswell? As you can see from our press page the press logos are now massive but when I edit the image settings on the page it just ignores them and displays large: https://byfoke.com/pages/featured-in is there another bit of code we can add to enable the smaller image sizes too? Many thnaks

KetanKumar
Shopify Partner
20578 2130 7791

@byFoke_dev 

all good 

how about you?

yes its  possible custom code add parent div and add custom code

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
0 Likes
byFoke_dev
Tourist
6 1 3

Hi Ketan,

thanks for getting back to me:) Are you able to do a code snippet like before and tell me where to add it? Many 

0 Likes