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 comment

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 comment
  • 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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 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 comment
  • 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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 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%;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 7/8/2020 at 3:38 AM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
img.Mobile-bar-branding-logo {
    width: 200px;
}
}

 

Hello, I would like the icons on the home page of my website be stacked in twos or threes in mobile view

https://rovr.systems

Please help if possible

Desktop View

image.thumb.png.2848fe8b4521910fc0c682678a6a3995.png

Mobile View

image.png.2cde667a3e38ca6d7a110458e50e3390.png

 

Link to comment
  • 0
On 8/6/2021 at 11:11 PM, HyperX said:

Hello, I would like the icons on the home page of my website be stacked in twos or threes in mobile view

https://rovr.systems

Please help if possible

Desktop View

image.thumb.png.2848fe8b4521910fc0c682678a6a3995.png

Mobile View

image.png.2cde667a3e38ca6d7a110458e50e3390.png

 

Hi. Add to Design > Custom CSS

/* Mobile icons 2 columns */
@media screen and (max-width:640px) {
div#block-372732c6731967715c0d~.row>.span-2 {
    width: 50% !important;
    float: left !important;
}
div#block-372732c6731967715c0d~.row>.span-2:nth-child(2n+1) {
    clear: left !important;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 11/15/2019 at 3:19 PM, lu.diehl said:

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{
  width: 50%;
  }
}

/* tablet screens */
@media only screen and (max-width: 768px) {
  #block-unique-ID{
  width: 100%;
  }
}

Let me know if it works 😉 If you need further help, please share a link to your website and pwd if needed.

Hi, this is exactly what I needed but now my logo is to the left and I need it centered. What can I add to this CSS code to center on mobile?

Link to comment
  • 0
On 8/20/2021 at 2:00 AM, goodformvintage said:

Hi, this is exactly what I needed but now my logo is to the left and I need it centered. What can I add to this CSS code to center on mobile?

Hi, What is your site url?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...