Summary Mobile issues

Site URL: https://www.blackgirlinom.com/

Hi there,

I am working on this website and need help figuring out an issue. 
On mobile, specifically on IOS the summary block carousel does not load properly. It is fine when resizing desktop browser (on windows) and on android but not on my iphone. 

I am happy for it to show just one at a time on mobile if that is the easiest fix.

Any ideas?

You can add 2 summaries with summary 2 is 1 item/row. We will give the code to show summary 1 on desktop, show summary 2 on mobile.

Ok that could work, can you share the code by chance?

If you don't add 2 summaries, we can check code to give exactly code

Ok I got it so that the different carousels show on their respected size. I realized that having the image size as auto was causing the issue - so I have changed it to 4:3 ratio. The only thing I need to tweak now is the size of the logos on mobile - I can't seem to target the right element.

/* different summary visible on mobile*/
@media screen and (max-width: 640px) {
  #press {
    display:none;
  }
}
@media screen and (min-width: 640px) {
  #press-mobile-2 {
    display:none;
  }
}

Can you also help me with this:
 I'm also trying to make this summary block full width - I've done it successfully for desktop but can't figure it out on mobile 

https://www.blackgirlinom.com/the-list

Thanks so much!

Add to Home > Design > Custom CSS > Then SAVE & RELOAD your site

/* fullwidth summary */
@media screen and (max-width:640px) {
div#block-yui_3_17_2_1_1607997707954_5235>div {
    width: 100%;
}
}

Thank you so much for your help!!! 😊

On 12/16/2020 at 3:11 AM, PamCheney said:

Thank you so much for your help!!! 😊

I see on tablet, the navigation is a bit narrow.

To increase width, add this to Home > Design > Custom CSS

/* nav tablet width */
@media screen and (max-width:900px) and (min-width:641px) {
.Header-inner.Header-inner--bottom {
    flex-direction: column;
}
}