Custom CSS not applying on mobile (Dawn theme)

[jasminsharp97]

Site: https://maison-rouge-ny.myshopify.com/

Password: thifis

I’m working on customizing this image and text section on my site, and it worked on desktop but the design isn’t applying on mobile. I want the first line of text “so what makes us” to be the same sans serif font as is on desktop, and I want the button to be centered. I also want to flip this section on mobile, so the image is below the text. How can I accomplish this? Currently the site looks like this on mobile:

And I want to have it look the same as desktop, with the image below the text. How do I do this?

[Ahmad31]

Hi @jasminsharp97 you want the button like this

[topnewyork]

Hello, @jasminsharp97

1. Go to Online Store
2. Edit Code
3. Find theme.css/base.css file
4. Add the following code in the bottom

@media (max-width: 768px){
  a.button.button--primary {
    display: flex;
    justify-content: center;
    width: 100%;
    height: auto;
}
.image-with-text-halves__text-item.grid__item div#ImageWithTextHalves--template--18647897538772__image_with_text_halves_JdCbnR {
    display: flex;
    flex-direction: column;
    font-family: sans-serif !important;
}
}

Thanks!

[Ahmad31]

• In your Shopify admin, go to Online Store > Themes.
• Find your active theme and click Actions > Edit code.
• In the left-hand sidebar, under the Layout folder, click on theme.liquid. This is the main template file that controls the structure of the site.
• before tag add this code:

​

• save the file and check the changes

[websensepro]

Hi @jasminsharp97

1. Go to Online Store → Theme → Edit code.
2. Open your theme.css / based.css file and paste the code in the bottom of the file.

@media(max-width:768px){
h2.image-with-text-halves__heading.inline-richtext.h1 {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.image-with-text-halves__text-item.grid__item div#ImageWithTextHalves--template--18647897538772__image_with_text_halves_JdCbnR {
    display: flex;
    flex-direction: column;
}
.image-with-text-halves__text-item.grid__item div#ImageWithTextHalves--template--18647897538772__image_with_text_halves_JdCbnR>p {
    font-family: sans-serif !important;
}
.image-with-text-halves__grid.grid.grid--gapless.grid--1-col.grid--3-col-tablet {
    display: flex !important;
    flex-direction: column;
}
.image-with-text-halves__text-item.grid__item {
    margin-bottom: 20px !important;

}
.image-with-text-halves__media-item.image-with-text-halves__media-item--small.image-with-text__media-item--middle.grid__item {
    order: 2;
}
}

Result:

If my reply is helpful, kindly click like and mark it as an accepted solution.
If you are happy with my help, you can help me buy a COFFEE
Thanks!

[kazi_1]

Hello @jasminsharp97 add this CSS at bottom of base.css

@media screen and (max-width: 749px) {

#shopify-section-template–18647897538772__image_with_text_halves_JdCbnR p.image-with-text-halves__text {
font-family: sans-serif !important;
}

#shopify-section-template–18647897538772__image_with_text_halves_JdCbnR {
text-align: center !Important;
}

.section-template–18647897538772__image_with_text_halves_JdCbnR-padding .grid {
flex-direction: column-reverse;
}

}

[jasminsharp97]

That didn’t work! It didn’t switch the columns and it messed up all the fonts on the home page - all the other fonts are correct, the only line I need to change is “So what makes us”

[jasminsharp97]

I tried adding that code and it doesn’t look like any of the changes applied! And also, I want “So what makes us DIFFERENT” to all be Proxima Nova, and I want the paragraph text below that to be the serif font Cormorant Garamond (both of those fonts are already added to the site). Can you help me figure that out?

[jasminsharp97]

I tried adding that code and nothing changed!

[kazi_1]

@jasminsharp97 where did you add the code?

[jasminsharp97]

No, I want it to look like this:

[jasminsharp97]

At the bottom of the base.css file like you said - if you go to the site now you can see I added the code and nothing changed.

[kazi_1]

@jasminsharp97 if you can share store theme access i can try to fix

[jasminsharp97]

I also wrote this code for the desktop version of that section; can you see if this is conflicting with what you originally gave me?

@media only screen and (min-width:749px) {

.image-with-text-halves__text-item.grid__item {
margin-left:50px;
padding-left:10px;
padding-right:10px;
color:black;
line-height:1em;
display: flex;
justify-content: center!important; /* Align horizontal /
align-items: center!important; / Align vertical */
}

.image-with-text-halves.image-with-text-halves–no-overlap.isolate .image-with-text-halves__text-item.grid__item > .image-with-text-halves__content > a.button {
margin-top: 30px;
left: 50%;
transform: translateX(-50%);
padding: 15px 50px;
}

.image-with-text-halves__text.image-with-text-halves__text–caption.subtitle.subtitle–large.subtitle {
font-family: Proxima Nova!important;
text-transform:uppercase;
font-size:20px;
font-weight:medium;
margin-bottom:0px!important;
}

#shopify-section-template–18373606605012__image_with_text_halves_JdCbnR .button.button–primary {
background: #000000;
color: #ffffff;
font-size: 24px!important;
letter-spacing: 1px!important;
line-height: 0.5em!important;
border: 1px solid #fff!important;
opacity: 1!important;
padding: 0px 15%!important;
margin: 3.5rem 0 0 16%!important;
}
}

[kazi_1]

@jasminsharp97 No try adding again

@media (max-width: 749px) {

#shopify-section-template–18647897538772__image_with_text_halves_JdCbnR p.image-with-text-halves__text {
font-family: sans-serif !important;
}

#shopify-section-template–18647897538772__image_with_text_halves_JdCbnR {
text-align: center !Important;
}

.section-template–18647897538772__image_with_text_halves_JdCbnR-padding .grid {
flex-direction: column-reverse;
}

}

[jasminsharp97]

I tried and it still didn’t make the change. I’m happy to give you access to the site privately if you want to try and fix it!

[kazi_1]

@jasminsharp97 ok please provide it

[kazi_1]

@jasminsharp97 i have put the CSS in theme.lliquid instead base.css and it works. You might have any error in base.css

[jasminsharp97]

Thank you so much!!!

[kazi_1]

You welcome!