Getting text to centralise on mobile view but not in desktop view

Highlighted
New Member
2 0 0

Hi there,

New to Shopify and the code behind it, I was wondering if someone could help me understand how to get some code ive added to the cart code template to centralise when in mobile view but not in desktop view (its currently on LHS in both views).

Ive attached some images of how it looks in mobile view and the code & its placement within the Debut theme template code.

Screen Shot 2020-11-08 at 11.05.18.pngScreen Shot 2020-11-08 at 11.05.40.png

 

I imagine this is a relatively quick fix here, any help / pointers on this would be highly appreciated!

 

Kind regards,

 

Lucy

0 Likes
Highlighted
Excursionist
11 0 4

Hi,

Here is quick solution

in selected div give a class name mob-center like this - 

<div class="mob-center">

 

Then go to your theme and stylesheet file very bottom of page and write this css code.

.mob-center{ @media(max-width:768px){ text-align:center;  } } 

 

Let me know that should works?

Thank you!

0 Likes
Highlighted
New Member
2 0 0

Hi Soyebamd,

 

 

Ive tried to implement your suggested solution just now, it doesnt appear to be working

I have this in my cart-template.liquid

<div class="mob-center">
<h4>Discount Code</h4>
<input type="text" name="discount"/>
<p>Discount codes will be applied at check out.</p>
</div>

and in theme.css.liquid:

.mob-center{ @media(max-width:768px){ text-align:center; } }

Anything else i should be checking?

Thanks,

Lucy

0 Likes
Highlighted
Excursionist
11 0 4

can I see cart URL to check please ?

 

Thanks

0 Likes