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

Change size of specific image when viewing on mobile


doshea

Question

Hi,

I am using the brine template...

I want to target and control the size of a specific image when changing between desktop, tablet and mobile.

The image is the logo 'tbk' and sits within a banner at the bottom of a page. The size of the logo is perfect when in desktop mode, too small in tablet mode and too large on mobile.

Is there some custom CSS i can add that will allow me to control the sizes for each. See images attached.

website: tbktest.squarespace.com 

 

Thanks in advance.

Dan.

Screenshot 2019-11-15 at 09.53.08.png

Screenshot 2019-11-15 at 09.52.53.png

Screenshot 2019-11-15 at 09.52.40.png

Link to post
  • Answers 85
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Hi @doshea Find the unique ID of the image, change "#block-unique-ID" to your image ID and apply the code below: /* mobile screens */ @media only screen and (max-width: 640px) { #block-unique-ID

Hi @lu.diehl thanks for your answer, very useful and should work I think. It's not for me though, I answered the original question - I was just wondering if @doshea could use text instead of an i

Hi, thank you both for your support. In the end i took Graemetg's adive and change the logo to text rather than an image.  

Posted Images

Recommended Posts

  • 0
On 2/9/2021 at 7:11 AM, tuanphan said:

Add to Design > Custom CSS


/* resize second image */
@media screen and (max-width:767px) {
[data-section-id="5fac1e6282b16a4c5a40d048"] {
    min-height: 20vh !important;
    height: 30vh;
}
}

 

So, this worked, but then the main hero image was getting cutoff (the woman's head was getting cut off), so I fixed it on desktop and then mobile reverted back to the issue I was previously having. Do you have a solution that keeps the desktop photo as is and then fixes the cropping issue on mobile? Site: parkwoodproper.com password: treva

Link to post
  • 0
On 2/12/2021 at 11:50 PM, MichaelCaz said:

So, this worked, but then the main hero image was getting cutoff (the woman's head was getting cut off), so I fixed it on desktop and then mobile reverted back to the issue I was previously having. Do you have a solution that keeps the desktop photo as is and then fixes the cropping issue on mobile? Site: parkwoodproper.com password: treva

Use this new code

/* resize second image */
@media screen and (max-width:767px) {
[data-section-id="5fac21e85cfd473088cd75d7"] {
    min-height: 20vh !important;
    height: 50vh;
}
}

 

Link to post
  • 0
On 2/14/2021 at 5:32 PM, philfv said:

Hey @tuanphan thank you for your help everytime.

I have another Question, i would like to change 3 or 4 other sites like the homepage with the logo symbols.

I used the code from you again and took the new block id and it works but not all of the buttons like the attached pic 

why are four of them in the right size an the other two not? 

 

Whats the problem? i dont get it. 

 

Thank you!

The website: https://www.finanzenverstehen.at/steuern

i used this code: 

 

/* 2 images/row */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1613296461487_34577+.row>.span-2:nth-child(n+2)>div {
    width: 50%;
    float: left !important;
    padding: 0 !important;
    clear: none;
}
div#block-yui_3_17_2_1_1613296461487_34577+.row>.span-2:nth-child(n+2)>div:nth-child(3n+1) {
    clear: left !important;
}
}

 

IMG_9057.jpg

It looks fine here?

Also, the page on mobile very long. You should consider adding a back to top button.

Link to post
  • 0
On 2/15/2021 at 3:34 PM, tuanphan said:

It looks fine here?

Also, the page on mobile very long. You should consider adding a back to top button.

Yes, i got it on my own, this Time. 🙂

 

thank you, but now i have a question again. I normally used 6 symbols, now i use 9 symbols and the structure isn good, like the attached pic. I try it again, maybe it works again, but can you look whats the problem with the Code? Only on mobile display.

Site: 

https://www.finanzenverstehen.at/assetklassen-1

Thank you! 

CD4BE4CA-69F8-4173-AC42-BE35B6F7D0F5.jpeg

Link to post
  • 0
On 2/17/2021 at 6:09 PM, philfv said:

Yes, i got it on my own, this Time. 🙂

 

thank you, but now i have a question again. I normally used 6 symbols, now i use 9 symbols and the structure isn good, like the attached pic. I try it again, maybe it works again, but can you look whats the problem with the Code? Only on mobile display.

Site: 

https://www.finanzenverstehen.at/assetklassen-1

Thank you! 

CD4BE4CA-69F8-4173-AC42-BE35B6F7D0F5.jpeg

Your layout can't change to 2 items/row.

If you want 3 items/row, we can give the code

Link to post
  • 0
8 hours ago, tuanphan said:

Your layout can't change to 2 items/row.

If you want 3 items/row, we can give the code

Okey, yes than 3 items/row if possible.

thank you again! 

Link to post
  • 0
On 2/19/2021 at 5:30 PM, philfv said:

Okey, yes than 3 items/row if possible.

thank you again! 

Remove this code

@media screen and (max-width: 767px) {
    div#block-yui_3_17_2_1_1613586157792_60317+.row>.span-2:nth-child(n+2)>div {
        width:50%;
        float: left !important;
        padding: 0 !important;
        clear: none
    }

    div#block-yui_3_17_2_1_1613586157792_60317+.row>.span-2:nth-child(n+2)>div:nth-child(3n+1) {
        clear: left !important
    }
}

Add new code

/* 3 images side by side */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1613586157792_60317+.row>.span-2>.image-block {
    width: 33.33% !important;
    float: left !important;
    clear: none !important;
}
div#block-yui_3_17_2_1_1613586157792_60317+.row>.span-2>.image-block {
    width: 33.33% !important;
    float: left !important;
    clear: none !important;
    padding: 0 !important;
}
div#block-yui_3_17_2_1_1613586157792_60317+.row>.span-2:after {
    content: "";
    clear: both;
    display: table;
}
}

image.thumb.png.e4ab56983cf751dff20890ad8d17478f.png

Link to post
  • 0
18 hours ago, Oliver_H said:

Hi!

Also trying to make an image smaller on just mobile.

This is my site:
http://dram.app
Password:
iloveBeer22!

Any help would be greatly appreciated  🙂

Add to Design > Custom CSS

/* resize footer logo */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1618943747766_7494 {
    width: 30%;
}
}

 

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