shykoala4

On 7/22/2020 at 11:41 PM, rwp said:

@media screen and (max-width: 639px){
  #pitch {
    min-height: unset !important;
  }

  #block-yui_3_17_2_1_1559189131342_7573 {
    padding: 0 !important;
  }
  
  #block-c6a5be37ddcf5791e077 {
    padding-top: 0 !important;
  }
  #biotease {
    margin-top: -17px;
  }
}

 

This worked! Thank you so much!

Sure! Here's my website: www.joyindementia.com

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:

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:

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.

On 7/8/2020 at 12:23 AM, kaceelaine said:

Yes, I have a solution for this! I stumbled upon this same issue a while ago and it was driving me nuts. The following code seems to solve it for me...

I guess I should add that this has worked on 7.0, not sure about 7.1 version.

.Mobile-bar.Mobile-bar--bottom {
  padding: 0!important;
}

Thanks, Kacee

Hmm...this isn't working for me 😞

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:

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

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?

Hello!

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

Template: Brine (Sonny)

Image: The logo "Befriended Heart" at the top left of my page.  The logo size is perfect when in desktop and tablet modes, but too small on mobile. See images attached.

Question: Can you help me make the logo bigger 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 for your help!

Laura

DESKTOP IMAGE

MOBILE IMAGE