my website images looks big on mobile phones

Highlighted
New Member
2 0 1

hello

My website name is  thekitchenist.ca

my website images looks too big on mobile phones. i bought a theme named 'Capital' from shopify store . it says mobile friendly 
Can you please help me to fix it?

0 Likes
Highlighted
Astronaut
1085 177 213

Hello,

What exactly looks big? That is very broad and subjective to be able to help you. 

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes
Highlighted
New Member
2 0 1

Hello Dantepw

how are you ?

Thank you for your Response

I don’t have website background I bought a paid theme from shopify and uploaded images. My website looks good when I visit by desktop However, when I visit by smartphone , images on front page of my website looks oversized . I can not see entire picture at once . It looks like overzoomed . I thought , website images would be adjusted automatically for size of any smartphone screen after I publish the website 
English is my second language 

if I could not make myself clear , I would suggest you , to visit my website via your smartphone first and then you will understand what I mean 

www.thekitchenist.ca

thank you very much 

1 Like
Highlighted
Shopify Partner
7473 1034 2599

@thekitchenist 

Try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

 

@media (max-width: 768px) {
.slideshow-same-height.slideshow-wrapper .svg-placeholder, .slideshow-same-height.slideshow-wrapper img {
height: auto;
}

 

 

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 Expert | 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
Highlighted
Astronaut
1085 177 213

@thekitchenist I understand now, thank you for bringing clarity to it.

Well, to be honest there is not much code can do to help you out. You need to re-upload images that are all the same height and width otherwise your slider will not look very good. The best I can do with code for you is this:

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > theme.scss.liquid and paste this at the bottom of the file:

@media (max-width: 767px){
.slideshow-same-height.slideshow-wrapper .svg-placeholder, .slideshow-same-height.slideshow-wrapper img{

	object-fit: fill !important;
	max-height: 100vw !important;
}


}


Let me know whether it works please.

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Hire me! Recommended by 25+ customers on Facebook. Click here to read their reviews.
◦ Contact me at: diego.boarutto.fortes@gmail.com
0 Likes