Debut Section Link CSS + Custom Section Mobile Treatment

jenseris
New Member
3 0 0

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!

0 Likes

Can you share your store URL

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
jenseris
New Member
3 0 0

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

0 Likes

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

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes
jenseris
New Member
3 0 0

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?

IMG_7722.PNG

 

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).

IMG_7723.PNG

Screen Shot 2021-02-24 at 5.24.28 PM.png

0 Likes

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

oscprofessional_0-1614234130613.png

do you want to be this gray link white color?

 

 

Want to modify or incorporate custom changes on store, Hire us
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Whats app
Free Website Review and advice for sale from Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO ; Digital Marketing & amp | Site Speed Optimization | Performance Site Audit
0 Likes