Debut Section Link CSS + Custom Section Mobile Treatment

[jenseris]

Hi there,

I'm helping a client customize Debut for her shop and have run into a couple of issues that I'm sure are quick fixes but I haven't been able to find them.

1) The image with text overlay section was not displaying on mobile -- it would show fine on desktop but the image would disappear on mobile, and the text was set to white, so that was a problem. I had made a solid color image at 1500x1500 (and then tried 2000 and 1000 but they didn't work either). If I put a "real" image from the site's media library (another product or site image) it would display, but it wasn't readable/not what I wanted so that didn't work. Any ideas? That section is now hidden.

1b) So I made a rich text section and coded it to have that hex color in the background. Figured out how to change the text and title to white, but the links in the body copy are still gray. What is the code to change that? Here is what I have put in to make it behave as it is already (including what I did to make the testimonials section have a background:

/*================ KIND WORDS BACKGROUND COLOR ================*/
.main-content #shopify-section-quotes {
	background: #e3f2ec;
	padding: 30px 0;
	display: block;
	overflow: hidden;
}
/*================ OUR STORY BACKGROUND COLOR ================*/
.main-content #shopify-section-1614011690dc73225b {
    background-color: #f99086;
    padding: 30px 0;
    display: block;
    overflow: hidden;
    color: white
}
.main-content #shopify-section-1614011690dc73225b p{
    background-color: #f99086;
    color: white
 
}
.main-content #shopify-section-1614011690dc73225b h2{
    background-color: #f99086;
    color: white
 
}

2) WITHIN THE HEART OF PLUME section -- gets really small side-by-side on mobile view. Is there a way to stack the logo above the text description before the featured collections?

Thanks!

[oscprofessional]

Can you share your store URL

[jenseris]

Sorry, it was hyperlinked in the first line: http://www.somethingplume.com/

[oscprofessional]

Hi,

Please share screenshot for the 1 & 1b point,

update these css 
Online Store->Theme->Edit code->Assets->theme.scss.liquid

@media only screen and (max-width: 749px)
.custom-content {
    margin-bottom: -22px;
    display: block;
    margin-left: -22px;
}
@media only screen and (max-width: 749px)
.small--one-half {
    width: 100%;
}

line no: 6326 

line no: 566

[jenseris]

Thanks so much for the mobile code - that worked great! It seems to maybe have affected more than just the custom content section and the shop items are now single-wide too. Totally fine, but I think the text might look better centered/aligned with square images?

Here is the home page with the rich text section (gray hyperlinks) and the image text overlay section briefly turned on below it (no image on mobile).

 

 

[oscprofessional]

Hi,

Add this css in same 749px media

@media only screen and (max-width: 749px){
.h4.grid-view-item__title.product-card__title, .price.price--listing {
text-align: center;
margin: 0 auto;
display: block;
}
}

I did not find 2 story section on mobile view

do you want to be this gray link white color?