How can I align the H2 header to the left on mobile?

Store Design
1

I am trying to align the h2 header text “What We Do” on the about us page for mobile

I’ve tried css code below but still won’t work. Any suggestions?

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

.image-with-text__heading {

text-align : left;

}

}

Site: https://gskirpa.myshopify.com/

Password: 12345

Thanks in Advance!

2

Hi @jbvergara , instead of your code

@media screen and (max-width: 750px) {
.image-with-text__heading {
text-align : left;
  }
}

Add this:

@media screen and (max-width: 750px) {
.image-with-text__heading {
width:100%;
text-align : left;
      }
}
3

Please add below css code in bottom of assets/base.css file

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

.image-with-text__heading {
text-align: left;
width: 100%;

}
}
Thank you.

4

Hi @jbvergara .

This is PageFly - Advanced Page Builder.

You can go to Online store => themes => actions => edit code and add this code on file base.css

@media screen and (max-width: 767px){
.image-with-text__heading h1{
text-align: left !important;
width: 100% !important;
}
}

Hope this helps.

Best Regards;

Pagefly

5

Hi @jbvergara ,

Please use below CSS to make content left.

@media(max-width:768px){
	.image-with-text__content--mobile-center>*{align-self:flex-start !important; text-align: left;}
}

Please remove text-align:left if don’t want to make paragraph content to left.

1 Like
6

This one worked. thanks!