Change size of specific image when viewing on mobile

17 hours ago, MichaelCaz said:

Updated -- this code seemed to work, but I'm having the same issue with a photo lower in the page

/* Tablet */
@media screen and (max-width:991px) {
body.homepage #page section:first-child {
    min-height: 40vh !important;
}
}
/* mobile */
@media screen and (max-width:767px) {
body.homepage #page section:first-child {
    min-height: 20vh !important;
}
}

Add to Design > Custom CSS

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

That worked beautifully! Thank you so much.

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

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

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

 

It looks fine here?

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

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! 

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! 

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

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

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! 

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

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  🙂

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%;
}
}

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

Mobile View

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

Mobile View

 

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

This is brilliant! Thanks

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?

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?

Hey! I'd like to display the photo of me on my about page smaller on mobile. Right now, the image takes the full width and also with the custom css code it doesn't work.

How can I fix this?

Link to the page is https://www.sarahkoester.com/about

8 minutes ago, sarahjo said:

Hey! I'd like to display the photo of me on my about page smaller on mobile. Right now, the image takes the full width and also with the custom css code it doesn't work.

How can I fix this?

Link to the page is https://www.sarahkoester.com/about

Add to Design > Custom CSS

/* Mobile About image */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1612187394411_15061 {
    width: 50% !important;
    margin: 0 auto;
}
}

39 minutes ago, tuanphan said:

Add to Design > Custom CSS

/* Mobile About image */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1612187394411_15061 {
    width: 50% !important;
    margin: 0 auto;
}
}

 

Thank you, that worked!