Homepage Pictures

New Member
4 0 0

Hi,
I need someone to sort out a theme code issue for me. I want my website to be fully optimised for mobile. Therefore I want to make sure that the landscape image on my website on PC shows exactly the same way on Mobile phones.

At the moment - the image is not in focus on mobile so I need help to adjust the code to make sure the picture fits to size on mobile automatically. I am on the Brooklyn Theme

Thank you

Ade

0 Likes

Hello 

 

<picture>
  <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width: 465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Astronaut
1069 145 260

It should be noted that the picture element does not work at all on internet explorer, alternatively you can use img srcset:

 

<img sizes="(min-width: 1200px) 730w,
            (max-width: 1199px) 610w,
            (max-width: 380px) 350w"
     srcset="/img/blog/responsive-images-lg.png 730w,
             /img/blog/responsive-images-md.png 610w,
             /img/blog/responsive-images-sm.png 350w"
     src="/img/blog/reponsive-images.png"
     alt="responsive images">

Antying above 1200px, show my 730px image, anything below 1199px show 610 image, anything below 380, show 350px image.

 

Edit: Whoops, I guess srcset isnt supported by IE either, though it was. Alternatively you can make specific classes to give to your image elements to hide on mobile and desktop:

 

<style>
.mobile-image{
display: block;
}
.desktop-image{
display: none;
}
@media (min-width: 992px){
.desktop-image{
display: block;
}
.mobile-image{
display: none;
}
}
</style>

<div class="image-container">
  <img src="/path-to-mobile-image" class="mobile-image">
  <img src="/path-to-desktop-image" class="desktop-image">  
</div>

We use picture elements on our website like @oscprofessional showed, but we get very VERY minimal traffic from IE so it's worth it to us for ease of use. If you're worried about IE though you can always use CSS.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
4 0 0

HI,

 

I am using Google Chrome - please can you confirm which I need to copy and paste to edit code

 

Also can I confirm which code do i need to edit.

 

Thanks

 

Ade

0 Likes
Astronaut
1069 145 260

This isn't really a copy and paste solution. You're going to need to know HTML, CSS, and liquid fundamentals if you're going to try and edit your existing slideshow code. This is a common question that comes up all the time. What @oscprofessional and I provided was just a very simple example of how you would achieve something like that. You may want to look into hiring a Shopify expert. You're probably going to want at least 2 different versions of your image, one for desktop and one for mobile. Mobile screens are taller and not so wide, desktop screens are wide and not so tall. So you're not going to be able to get your image to show up the same on mobile and desktop.

 

What is full width on desktop with be smaller on mobile because the height of the image has to adjust to the width of it. What you're probably seeing is you have a background image on desktop that looks great, then you get to mobile and it's cut off at some weird spot you dont like. You can change the background position and size to more fit what you want, but you're never going to be able to make it the same as on desktop because the dimensions have to be different. So swapping out 2 different images is the best option in my opinion. I can make a section like this for you if you're interested, but it's pretty involved to just cover in a forum post. You can send me a direct message on here if you enable messaging in your profile.

If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes
New Member
4 0 0

Hi

 

I have now dropped you a message.

 

Please check and let me know your thoughts.

 

Regards

 

Ade


@Ninthony wrote:

This isn't really a copy and paste solution. You're going to need to know HTML, CSS, and liquid fundamentals if you're going to try and edit your existing slideshow code. This is a common question that comes up all the time. What @oscprofessional and I provided was just a very simple example of how you would achieve something like that. You may want to look into hiring a Shopify expert. You're probably going to want at least 2 different versions of your image, one for desktop and one for mobile. Mobile screens are taller and not so wide, desktop screens are wide and not so tall. So you're not going to be able to get your image to show up the same on mobile and desktop.

 

What is full width on desktop with be smaller on mobile because the height of the image has to adjust to the width of it. What you're probably seeing is you have a background image on desktop that looks great, then you get to mobile and it's cut off at some weird spot you dont like. You can change the background position and size to more fit what you want, but you're never going to be able to make it the same as on desktop because the dimensions have to be different. So swapping out 2 different images is the best option in my opinion. I can make a section like this for you if you're interested, but it's pretty involved to just cover in a forum post. You can send me a direct message on here if you enable messaging in your profile.


 

0 Likes
Astronaut
1069 145 260
Ah sorry I am hardly on the computer over the weekend, I'll check when I get in on monday.
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
0 Likes