shoshinmatcha

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

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

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?

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.

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!!!

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

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? 

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? 

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!! 🙂

yes perfect that worked! thanks so much

@tuanphan - Thanks so much! it worked. it looks cool thanks! there was just one question now that it works, it looks like now the shop now is slightly higher? the text "SHOP NOW" looks like a mm higher in the navigation? any help is appreciated 🙂

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?

Hi @tuanphan

I am trying the same thing with my website www.shoshinmatcha.com

 I would like to highlight the Shop Now navigation menu item at the top of the page. I tried to alter you code but it didn't work... please help? :)