Jump to content

Reduce image on mobile

Recommended Posts

Site URL: https://www.andreaaronica.com/test-sidebar/Blog%20Post%20Title%20One-nhkjm

Hi there, 

I wanna reduce an image just on mobile. I tried with this code but every time I had the Id I get a syntax error.

#collection-573ca1a67c65e4bc1c012206 { #block-yui_3_17_2_1_1602785904195_3833        
@media screen and (max-device-width: 640px) {
 .sqs-block-content .image-block-outer-wrapper  {
    width: 50%;
    height: 50%;
    margin: auto;        
   }
}
}

 

Thank you.

Link to comment
  • Replies 7
  • Views 555
  • Created
  • Last Reply
3 minutes ago, Leo_Dev said:

 


@media (max-width: 640px) {
    #block-yui_3_17_2_1_1602785904195_3833 .img-wrapper  {
        width: 50%;
        height: 50%;
        margin: auto;        
    }
}

Please let me know if it worked 🙂

Hi leo it does work but then I have a huge space between that one and the rest of the content.

Can you please help with that?

lll.png

Link to comment
2 hours ago, Leo_Dev said:

@media (max-width: 640px) { #yui_3_17_2_1_1602843540956_114 { margin-bottom: -20vh; } }

@media (max-width: 640px) {
    #block-yui_3_17_2_1_1602785904195_3833 .img-wrapper  {
        width: 50%;
        height: 50%;
        margin: auto;        
    }
}
@media (max-width: 640px) {
    #block-yui_3_17_2_1_1602785904195_3833   {
        margin-bottom: -32vh;   
    }
}

I changed it a bit but it works just fine, thank you 

 

Link to comment
6 hours ago, Leo_Dev said:

 



@media (max-width: 640px) {
    #block-yui_3_17_2_1_1602785904195_3833 .img-wrapper  {
        width: 50%;
        height: 50%;
        margin: auto;        
    }
}

Please let me know if it worked 🙂

I tried it to watch it from mobile instead that from my computer and this is what happens. On Chrome the thumbnails disappear while on other browsers like Brave and Mi Browser search bar is on top of the text

Screenshot_2020-10-16-18-55-29-157_com.instagram.android.jpg

Screenshot_2020-10-16-18-56-51-053_com.android.chrome.jpg

Link to comment
7 hours ago, Leo_Dev said:

 


@media (max-width: 640px) {
    #block-yui_3_17_2_1_1602785904195_3833 .img-wrapper  {
        width: 50%;
        height: 50%;
        margin: auto;        
    }
}

Please let me know if it worked 🙂

You know what? It's getting harder than I thought can I just remove all the stuff in my side bar from mobile? maybe it's easier

 

Link to comment
4 minutes ago, AA95 said:

You know what? It's getting harder than I thought can I just remove all the stuff in my side bar from mobile? maybe it's easier

 

I made disappear the summaries all together

@media (max-width: 767px) {
    .sqs-block-summary-v2 { display: none; }
}

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.