Change size of specific image when viewing on mobile

4 hours ago, shykoala4 said:

Hello!

Issue: I want to target and control the logo size when changing between desktop and mobile.

Add to Home > Design > Custom CSS

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

16 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

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

That worked! Thank you so much, Tuan! ❤️ 

One more sizing question for the same page.

Issue: The "How I Can Help You" button at the top of the page is HUGE on mobile.

Question: How do I make this button the same size as the other buttons on the page?

Hi again!

Thanks for your help with resizing my logo on mobile!

One more question.

Issue: I want to target and control the button size when changing between desktop and mobile.

Template: Brine (Sonny)

Image: The teal button "How I Can Help You" at the top of the page.  The button size is perfect when in desktop and tablet modes, but too big on mobile. See images attached.

Question: Can you help me make the button smaller for mobile? Ideally the same proportion as it appears for desktop below. *Note that I've already tried multiple media rules codes in my CSS and they haven't made a difference 😞 * 

Website: joyindementia.com 

Thank you again for your help!

Laura

DESKTOP IMAGE

MOBILE IMAGE

On 7/9/2020 at 2:25 AM, shykoala4 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;
}
}

On 7/12/2020 at 5: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 Tuan, 

Unfortunately that custom CSS didn't work for the button.

Here's a screenshot of the mobile version:

6 hours ago, shykoala4 said:

Hi Tuan, 

Unfortunately that custom CSS didn't work for the button.

Here's a screenshot of the mobile version:

 

Try again with this

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

19 hours ago, tuanphan said:

Try again with this

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

That worked, thank you, Tuan!

I'm also getting a weird extra space thing now on my mobile view too. I'll post a brand new reply about it.

Hi Tuan,

Thank you again for all your help! I promise this is my last question for a while 🙂

Issue: On my homepage, I want to target and control the amount of white space between sections when changing between desktop and mobile. (This issue seems to only occur on my Homepage, and no other pages)

Template: Brine (Sonny)

Blank Space (Padding?): On my Homepage, the amount of white space between sections is perfect when in desktop and tablet modes, but there's too much white space between sections when viewed on mobile. 

See images below and attached. 

The extra padding I'm trying to decrease on mobile is found in three main places:

1) Between the announcement bar and the picture of the candle

2) Between the candle picture and the "Featured In:" logos

3) After the "Featured In:" logos

Question: Can you help me decrease the white space between the above sections on my homepage, when seen on mobile? Ideally the same proportion as it appears for desktop below. *Note that I've already tried multiple media rules codes in my CSS and they haven't made a difference 😞 * 

Website: joyindementia.com 

Thank you again for your help!

Laura

DESKTOP:

MOBILE:

I have also applied the code below to attempt and make the logo a bit bigger on tablet view:

@media only screen and (max-width: 768px) {
  div#block-yui_3_17_2_1_1595463768673_25773 {
    max-width: 100% !important;
    margin: 0 auto;
  }
}

The logo gets a bit bigger but not the size I still want. Any ideas?

On 7/16/2020 at 6:00 AM, shykoala4 said:

Hi Tuan,

Thank you again for all your help! I promise this is my last question for a while 🙂

 

Issue: On my homepage, I want to target and control the amount of white space between sections when changing between desktop and mobile. (This issue seems to only occur on my Homepage, and no other pages)

Template: Brine (Sonny)

Blank Space (Padding?): On my Homepage, the amount of white space between sections is perfect when in desktop and tablet modes, but there's too much white space between sections when viewed on mobile. 

See images below and attached. 

The extra padding I'm trying to decrease on mobile is found in three main places:

1) Between the announcement bar and the picture of the candle

2) Between the candle picture and the "Featured In:" logos

3) After the "Featured In:" logos

Question: Can you help me decrease the white space between the above sections on my homepage, when seen on mobile? Ideally the same proportion as it appears for desktop below. *Note that I've already tried multiple media rules codes in my CSS and they haven't made a difference 😞 * 

Website: joyindementia.com 

Thank you again for your help!

Laura

Missing your notification. Have you solved it yet?

8 minutes ago, jlama said:

I have also applied the code below to attempt and make the logo a bit bigger on tablet view:

@media only screen and (max-width: 768px) {
  div#block-yui_3_17_2_1_1595463768673_25773 {
    max-width: 100% !important;
    margin: 0 auto;
  }
}

 

The logo gets a bit bigger but not the size I still want. Any ideas?

Can you share site url? We can check easier.

http:// www.pantryphilosophy.com 

Password: Pantry

15 minutes ago, jlama said:

http:// www.pantryphilosophy.com 

Password: Pantry

Add to Home > Design > Custom CSS

/* Footer logo on tablet */
@media screen and (max-width:900px) and (min-width:641px) {
div#footerBlocksBottom .span-12 .span-2 {
    width: 70%;
}
div#footerBlocksBottom .span-12 .span-5 {
    width: 15%;
}
}

it worked! thank you

Hello I have the same issue
but in my case the image I want to resize for mobile is so many and im not used to doing the codes
can anybody help me?

my page is unpublished here's the sample page link:

https://orb-hexahedron-g54x.squarespace.com/productsandservices
password: speedwork2020

it would be helpful if someone can help me with this. Tried the solution it did get smaller but the right side becomes empty. pls help. thanks

3 hours ago, Speedwork said:

Hello I have the same issue
but in my case the image I want to resize for mobile is so many and im not used to doing the codes
can anybody help me?

my page is unpublished here's the sample page link:

https://orb-hexahedron-g54x.squarespace.com/productsandservices
password: speedwork2020

it would be helpful if someone can help me with this. Tried the solution it did get smaller but the right side becomes empty. pls help. thanks

Remove code you used & add this to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5f6c68950b3f4f7a0513ea5a .span-12 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-5f6c68950b3f4f7a0513ea5a .span-12 .span-3:nth-child(2n+1) {
    clear: left;
}
}

13 minutes ago, tuanphan said:

Remove code you used & add this to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-5f6c68950b3f4f7a0513ea5a .span-12 .span-3 {
    width: 50% !important;
    float: left !important;
}
div#page-section-5f6c68950b3f4f7a0513ea5a .span-12 .span-3:nth-child(2n+1) {
    clear: left;
}
}

 

Thank you this worked on my first tab. thank you so much.
but it doesnt on my second tab. 

any advise?

Hello - @lu.diehl. The code you shared at the beginning of this thread worked great for me. However, I'm trying to get the image (logo mark) centered on mobile and tablet view. I added   position: center;   to the code provided but wasn't successful in getting it repositioned. Do you know how I can make that happen?

Many thanks!

10 hours ago, ACScruggs said:

Hello - @lu.diehl. The code you shared at the beginning of this thread worked great for me. However, I'm trying to get the image (logo mark) centered on mobile and tablet view. I added   position: center;   to the code provided but wasn't successful in getting it repositioned. Do you know how I can make that happen?

Many thanks!

Hey @ACScruggs-- can you share a link to your website? 

@lu.diehl LINK TO SITE

14 hours ago, ACScruggs said:

@lu.diehl LINK TO SITE

I see footer fine on mobile. With tablet, add this to Home > Design > Custom CSS

/* resize tablet fotoer */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-5faf5ce5162257496b6fea9b .span-12 .span-4 .span-2 {
    width: 100%;
}
}

@tuanphan Hi! That code didn't move the sunburst graphic to the center in mobile view. I corrected the typo fotoer to footer but that didn't seem to be the issue. 

13 hours ago, ACScruggs said:

@tuanphan Hi! That code didn't move the sunburst graphic to the center in mobile view. I corrected the typo fotoer to footer but that didn't seem to be the issue. 

Mobile or tablet or both? Above code for tablet

@tuanphan Mobile view. (However, it needs to be centered in both, but I'm only trying to correct mobile view.)

@tuanphan I would like to get the sunburst graphic positioned in the center of this block in mobile view. 

On 11/18/2020 at 11:27 PM, ACScruggs said:

@tuanphan Mobile view. (However, it needs to be centered in both, but I'm only trying to correct mobile view.)

Add to Home > Design > Custom CSS

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