Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

HELP?! - photos too big on mobile site


shoshinmatcha

Question

  • Answers 18
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

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

@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_1555334

Posted Images

18 answers to this question

Recommended Posts

  • 0

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

Link to post
  • 0
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;
}
}

 

Link to post
  • 0

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? 

Link to post
  • 0
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

Link to post
  • 0
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? 

Link to post
  • 0
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

Edited by tuanphan
Link to post
  • 0
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;
}
}

 

Link to post
  • 0
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!!!

screenshotweb.png

Link to post
  • 0
5 minutes ago, tuanphan said:

Seems fine here? or can you describe in detail?

image.thumb.png.5386a4ade9f0183d82406238d718b4af.png

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.

Link to post
  • 0
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.

Link to post
  • 0
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

Link to post
  • 0
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?

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...