HELP?! - photos too big on mobile site

Site URL: https://shoshinmatcha.com/select-your-matcha

hello,

when these two pics on my site https://shoshinmatcha.com/select-your-matcha

go to mobile they take up the whole screen. how do I make them smaller and side by side like they look on an ipad or computer ???

please help?

Yes. You can solve this. But first, can you turn off "disable right click" function?

Hello again! yes I have just enabled right click.

so with this problem I have the same issue with the bottom of the page with the credit cards accepted icons they look so big too on mobile! lol.

any help is really appreciated!! 🙂

2 minutes ago, shoshinmatcha said:

Hello again! yes I have just enabled right click.

 

so with this problem I have the same issue with the bottom of the page with the credit cards accepted icons they look so big too on mobile! lol.

 

any help is really appreciated!! 🙂

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
div#page-5c88b8cfa4222f95b671ea08>.row:nth-child(2) .span-4 {
    float: left !important;
    width: 50% !important;
}
div#page-5c88b8cfa4222f95b671ea08>.row:nth-child(2) .span-4 * {
    font-size: 20px;
}
}

YOU'RE AMAZING! it works! 

So I can try to do this stuff myself (teach a man to fish)... you are saying in your code when a screen size is 640PX or less change that photo to 50% of the size? 

so if I wanted to use this for other pictures on my site is that possible? so if I wanted to change the credit card logos down the bottom of the site pages when it goes to mobile

so using your code and trying to change it would it be something similar to this???

@media (max-width:640px) { data-block-id="id="block-yui_3_17_2_1_1555334200897_7528" { 
   float: left; !important;
    width: 50% !important;
   }
}

I tried that and it doesn't work lol... but is it close? 

13 hours ago, shoshinmatcha said:

YOU'RE AMAZING! it works! 

@media screen and (max-width:640px) {
/* credit cards logo */
div#block-yui_3_17_2_1_1555334200897_7528 .slide {
    float: left !important;
    width: 25% !important;
}
div#block-yui_3_17_2_1_1555334200897_7528 .slide img {
    width: 100% !important;
    height: auto !important;
}
div#block-yui_3_17_2_1_1555334200897_7528 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
}

I guess this code looks better

9 hours ago, tuanphan said:

@media screen and (max-width:640px) {
/* credit cards logo */
div#block-yui_3_17_2_1_1555334200897_7528 .slide {
    float: left !important;
    width: 25% !important;
}
div#block-yui_3_17_2_1_1555334200897_7528 .slide img {
    width: 100% !important;
    height: auto !important;
}
div#block-yui_3_17_2_1_1555334200897_7528 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
}

I guess this code looks better

yes this works! amazing. 

so can I slot in other div blocks in my site? as most of my pictures do this same thing and look too big on mobile. 

would I just replace the block-yui number? 

8 hours ago, shoshinmatcha said:

yes this works! amazing. 

so can I slot in other div blocks in my site? as most of my pictures do this same thing and look too big on mobile. 

would I just replace the block-yui number? 

I'm not sure. You can try. If it doesn't work, just tag me, I will take a look

Hi @tuanphan

Hoping you could help with a similar thing? It's the same thing as above that you helped with. When the page goes to mobile the pictures take up a lot of the screen, It would be great if I can make them smaller like you helped with above? Thanks SOOO much in advance 🙂

https://shoshinmatcha.com/shop

Hi @tuanphan

Hoping you could help with a similar thing? It's the same thing as above that you helped with. When the page goes to mobile the pictures take up a lot of the screen, It would be great if I can make them smaller like you helped with above? Thanks SOOO much in advance 🙂

https://shoshinmatcha.com/shop

On 5/29/2020 at 9:43 AM, shoshinmatcha said:

Hi @tuanphan

Hoping you could help with a similar thing? It's the same thing as above that you helped with. When the page goes to mobile the pictures take up a lot of the screen, It would be great if I can make them smaller like you helped with above? Thanks SOOO much in advance 🙂

https://shoshinmatcha.com/shop

drink & eat images?

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
body#collection-5bfe7194cd8366f9106cc861 section.Intro .span-9 .row .col:not(:first-child) {
    width: 50% !important;
    float: left !important;
}
}

On 5/31/2020 at 8:18 PM, tuanphan said:

drink & eat images?

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
body#collection-5bfe7194cd8366f9106cc861 section.Intro .span-9 .row .col:not(:first-child) {
    width: 50% !important;
    float: left !important;
}
}

 

yes those are the ones.

It did the job but as I change the responsive side it does something weird:

Also it seems like its not completely aligned if you look in the middle of the two images... they are perfectly aligned to either side but there is some weird space in between them that doesn align with the product images?

As always any of your help is absolutely appreciated!!!

Seems fine here? or can you describe in detail?

5 minutes ago, tuanphan said:

Seems fine here? or can you describe in detail?

Mobile looks fine but for some reason as you bring the browser size smaller (from a typical desktop size) it ends up having that weird alignment showed in the photo above.

Just now, shoshinmatcha said:

Mobile looks fine but for some reason as you bring the browser size smaller (from a typical desktop size) it ends up having that weird alignment showed in the photo above.

above code works on mobile only

if you want it work tablet + mobile, edit 767px to 991px or any number you want.

and sorry the second bit is if you look at the left side of the eat photo it does not line up with the photo below?

1 minute ago, tuanphan said:

above code works on mobile only

if you want it work tablet + mobile, edit 767px to 991px or any number you want.

it works fine on mobile but even if I change the breakpoint to 991 (I just tested) it makes the photos do that weird alignment

All good if I leave at 640px it helps fix it... but the alignment thing I mentioned too. do you know how to fix that? the outside edge of the pics are aligned with the bottom images but the middle is not ? @tuanphan

On 6/2/2020 at 7:23 PM, shoshinmatcha said:

All good if I leave at 640px it helps fix it... but the alignment thing I mentioned too. do you know how to fix that? the outside edge of the pics are aligned with the bottom images but the middle is not ? @tuanphan

Hi. Sorry for the delay. Just had a few days off in hometown. Have you solved yet?

Hi @tuanphan, could I please ask you...on my homepage I'd like to reduce the size of the black and white images just slightly on MOBILE view...any ideas? I'm confused by the codes above...I need a code that makes all the images on my homepage slightly smaller...

https://deep-learning-cafe.squarespace.com/

password: password123

21 hours ago, IwanJ said:

Hi @tuanphan, could I please ask you...on my homepage I'd like to reduce the size of the black and white images just slightly on MOBILE view...any ideas? I'm confused by the codes above...I need a code that makes all the images on my homepage slightly smaller...

https://deep-learning-cafe.squarespace.com/

password: password123

Reduce size or make 2 - 3 images/row?