Change size of specific image when viewing on mobile

@tuanphan I am trying to center the sunburst image located in the content block below the header (not in the footer) - aka the second content block below the header on the home page. Below the text that says ELEVATED. EMPOWERED. ECO-FASHION. 

Thank you for your help!! 

On 11/23/2020 at 2:12 AM, ACScruggs said:

@tuanphan I am trying to center the sunburst image located in the content block below the header (not in the footer) - aka the second content block below the header on the home page. Below the text that says ELEVATED. EMPOWERED. ECO-FASHION. 

Thank you for your help!! 

Hi. Do you still need help on this?

@tuanphan I resolved the issue! Thanks for your follow up.

Hello @tuanphan you helped me but i need more help....

i would like to change our homepage with symbols so user can get easily to our sites, but i have a problem, the symbols are to big for mobile view, so i tried your codes, and they work.

But only the first symbol reacts to the changed width the other ones doesn´t 

I would like to have 2 symbols in a row on the mobile view like the picture of the desktop view attached. 

I am not a coder, so i tried my best. 

can you help me please? 

Site: finanzenverstehen.at/startseite-1

Pw: test1234

Thank you and sorry for my bad english. 

On 1/10/2021 at 8:05 PM, philfv said:

Hello @tuanphan you helped me but i need more help....

i would like to change our homepage with symbols so user can get easily to our sites, but i have a problem, the symbols are to big for mobile view, so i tried your codes, and they work.

But only the first symbol reacts to the changed width the other ones doesn´t 

I would like to have 2 symbols in a row on the mobile view like the picture of the desktop view attached. 

I am not a coder, so i tried my best. 

can you help me please? 

Site: finanzenverstehen.at/startseite-1

Pw: test1234

Thank you and sorry for my bad english. 

 

 

Hi. Your current layout can't change to 2 items/row on mobile.

You need to adjust a bit.

Step 1. Try dragging Image Block 4 below Image Block 1 so that it appears a black line, width of line = width of Image Block 1
Do similar for Image Block 5, 6, 7

Step 2. Let me know. I will give the code on mobile.

11 hours ago, tuanphan said:

Hi. Your current layout can't change to 2 items/row on mobile.

You need to adjust a bit.

Step 1. Try dragging Image Block 4 below Image Block 1 so that it appears a black line, width of line = width of Image Block 1
Do similar for Image Block 5, 6, 7

Step 2. Let me know. I will give the code on mobile.

Ok i think i did it. 

I dragged the images 4, 5 , 6 below the other ones and they took the width of it.

Thx. 

23 hours ago, philfv said:

Ok i think i did it. 

I dragged the images 4, 5 , 6 below the other ones and they took the width of it.

Thx. 

Add to Custom CSS

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

1 hour ago, tuanphan said:

Add to Custom CSS

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

 

Thank you very much!!!! 

You are an absolutely nice guy! 

Greetings from cold and snowy Austria.

Hello @tuanphan

Could I please also get your help? 
I'm trying to add custom css so that when viewed on mobile the whole image opening image displays (at present it cuts off the two outside people, I have tried with everyone's suggestions above with no luck. 

This is a link to the site - https://lion-toucan-jd9l.squarespace.com

It's for the opening image underneath the logo and first 2 paragraphs. 

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 worked for me but my image is not all the way to the left, is there a way to center it?

Thank you in advance for your help!

On 1/13/2021 at 11:25 PM, TI-Group said:

Hello @tuanphan

Could I please also get your help? 
I'm trying to add custom css so that when viewed on mobile the whole image opening image displays (at present it cuts off the two outside people, I have tried with everyone's suggestions above with no luck. 

This is a link to the site - https://lion-toucan-jd9l.squarespace.com

It's for the opening image underneath the logo and first 2 paragraphs. 

Thanks :) 

Remove this code

.homepage .section-background img {
    width: 100% !important;
    height: auto !important;
}

Add this new code

@media screen and (max-width: 767px) {
    .homepage #page section:nth-child(2) {
        min-height: 30vh !important;
    }
}

On 1/14/2021 at 11:36 PM, Imanixyz said:

Hi, this worked for me but my image is not all the way to the left, is there a way to center it?

 

Thank you in advance for your help!

Can you share site url? We can check easier

3 hours ago, tuanphan said:

Remove this code

.homepage .section-background img {
    width: 100% !important;
    height: auto !important;
}

Add this new code

@media screen and (max-width: 767px) {
    .homepage #page section:nth-child(2) {
        min-height: 30vh !important;
    }
}

 

It worked! Thank you so much 😄

Hello!

I would like to control the logo size in the footer.

In desktop, it displays correct (I've added spacer blocks on both sides of the logo).

On mobile and tablet, it displays way to large.

I've tried this CCS code, but can't get it to work:

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

Could it be because this is in the footer? 

Website: https://spinach-keyboard-w7ws.squarespace.com/

PW: hoyden2021

Thanks in advance

--------------

In desktop, the logo displays correct:

In mobile, it displays too large:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1611311458556_32109 {
    width: 50% !important;
    margin: 0 auto;
}
}

On 7/12/2020 at 11:32 PM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
figure#yui_3_17_2_1_1594589428149_66 a {
    padding: 5px 10px;
    font-size: 10px !important;
}
}

 

Hi @tuanphan, I tried using this code and replacing the 'target' with the block id on my own website, but I must have gotten it wrong as nothing happens. I would like to do two things - put the site title all on one line in mobile, and make the two buttons smaller and also horizontally next to each other. 

Site URL: molliekeane.com

Thank you!

Thank you so much tuanphan. Works great!

On 1/13/2021 at 10:36 AM, tuanphan said:

Add to Custom CSS

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

 

Hey @tuanphan i noticed a problem, on android smartphones, do you know what the problem is? 

Look at the attached Pic.

On iOS Devices the size is absolute perfect but on android it isn´t.

Thank you, again! 

On 1/24/2021 at 7:13 AM, CillianS said:

Hi @tuanphan, I tried using this code and replacing the 'target' with the block id on my own website, but I must have gotten it wrong as nothing happens. I would like to do two things - put the site title all on one line in mobile, and make the two buttons smaller and also horizontally next to each other. 

Site URL: molliekeane.com

 

Thank you!

It looks like you solved Site Title, however, if you check on iPhone 5, site title still 2 lines. Add this new code

/* site title one line */
@media screen and (max-width:767px) {
a#site-title {
    font-size: 40px;
    white-space: nowrap !important;
}
}

With buttons, where is button? I don't see it on homepage

7 hours ago, philfv said:

Hey @tuanphan i noticed a problem, on android smartphones, do you know what the problem is? 

 

Look at the attached Pic.

On iOS Devices the size is absolute perfect but on android it isn´t.

 

Thank you, again! 

Try new code

/* 2 images/row */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1610231497033_26238+.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_1610231497033_26238+.row>.span-2:nth-child(n+2)>div:nth-child(3n+1) {
	clear: left !important;
}
}

Hi all...really useful tips here for Brine users. Thanks.

Is there anyone out there who can tell me how i can align the bottom 2 text blocks here in tablet view? www.jamieclarkimages.co.uk .....

Any help gratefully received.....:)

On 2/3/2021 at 7:28 PM, Jamiepeterhugh said:

Hi all...really useful tips here for Brine users. Thanks.

Is there anyone out there who can tell me how i can align the bottom 2 text blocks here in tablet view? www.jamieclarkimages.co.uk .....

Any help gratefully received.....:)

Can you share link to page in screenshot? We can  check easier

Hello,

I'm having a similar issue and am trying to make the banner background image show the full width of the image on mobile. You can access my site here: parkwoodproper.com PW: treva

Can someone help? Thanks in advance!

7 minutes ago, EditionStudios said:

Hello,

I'm having a similar issue and am trying to make the banner background image show the full width of the image on mobile. You can access my site here: parkwoodproper.com PW: treva

Can someone help? Thanks in advance!

I tried using this code but then it adds blank space under the photo

@media screen and (max-width:640px) {
.homepage .section-background img {
    width: 100% !important;
    height: auto !important;
}
}

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