The texts in the address section are aligned on the right. I want to take it to the left

[SeizeTheDay]

During the checkout steps, the fields in the address section are aligned on the right. I want to move it to the left, which codes do I need to change? Thank you.

 

website address: http://seocontentwriting.org

[ps8modules.com]

Hi.

You need to add your own CSS style to custom.css in your template folder.
./themes/01bold/assets/css/custom.css

Find the section:

@media (max-width: 767px){

and add:

#customer-form label, #login-form label {
        text-align: left !important;    
    }

If I see your custom.css correctly, it will look like this:

/* 
  keep your custom CSS modificatins here,
  make sure to backup this file before upgrading the theme */


@media (max-width: 767px){
    .products .product-miniature .product-content {
        width: 100% !important;
        right: 0% !important; 
        top: auto;
        bottom: 0;
        position: relative !important;
    }

    #customer-form label, #login-form label {
        text-align: left !important;    
    }
    
    .products .product-miniature {
        float: left;
        width: 48% !important;
        margin-left: 0 !important;z
    
    }
    
    .products .product-miniature:nth-child(even) {
        float: left;
        margin-bottom: 10%;
    }
    
    .products .product-miniature .product-content .product-title a { 
        font-size: 12px !important;
    }
            
            
    body.list-classic .products .product-miniature:nth-child(even) {       
        margin-left: 4% !important;
    }
}

 

[SeizeTheDay]

@ps8modules.com Hi, thank you for your response. I applied the codes in custom.css but didn't work. I added the code to the .form-control-label { section in the theme.css file and it worked.

 

.form-control-label {
  padding-top: 0.625rem;
  text-align: left !important;   }

 

[ps8modules.com]

It is not wise to put modified CSS in the theme.
That's why I wrote, add to custom.css.

[faizshah]

To align the text in the address section to the left, you can use CSS to override the default alignment. Here's an example of how you can do it:

```css
.address-section {
    text-align: left;
}
```

In this example, `.address-section` is the class or ID selector for the container element that holds the address text. You'll need to replace it with the actual selector used in your HTML markup.

Once you've identified the correct selector, add the above CSS code to your stylesheet. This will set the text alignment within the `.address-section` element (or whichever element you're targeting) to left-aligned.

If you're using inline CSS or an inline style attribute, you can directly apply the `text-align: left;` style to the relevant HTML element:

```html
<div class="address-section" style="text-align: left;">
    <!-- Address text goes here -->
</div>
```

Remember to adjust the selector or style attribute according to your specific HTML structure and class/ID names. This change should effectively align the text in the address section to the left.

[SeizeTheDay]

5 hours ago, ps8modules.com said:

It is not wise to put modified CSS in the theme.
That's why I wrote, add to custom.css.

The code you specified in custom.css did not work. Do you have any other suggestions?