How can i align text to be all the same

[umrraz90]

Hi, 

I would like the text on all pages to be consistent for mobile and desktop. 

Currently my 'Image with text is positioned on the left where as my page title 'Dried Wedding Flowers' is centred, I would like the Dried Wedding Flowers to be inline with the 'Life's Precious Moments' text and description.

Please see screenshot.

[BSS-TekLabs]

Hello @umrraz90 .
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

[umrraz90]

Hi, 

Thank you - its https://www.theflowerstudiobyroo.co.uk/pages/dried-flower-weddings 

[BSS-TekLabs]

- Here is the solution for you @umrraz90 
- Please follow these steps:

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

@media only screen and (min-width: 600px) {
.page-width--narrow {
 float: left !important;
    margin-left: 12rem !important;
} 
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[umrraz90]

hi its still not worked for me, is there any chance we can collaborate and you apply for me, as ive followed those steps and its still displaying the same

[PageFly-Amelia]

Hi @umrraz90 

This is Amelia from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code. 

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

.page-width.page-width--narrow.section-template--22248077394254__main-padding {
padding-left: 156px;

max-width: var(--page-width);
}

Hope that my solution works for you.

Best regards,

Amelia | PageFly

[umrraz90]

Hi Amelia, 

Thank you, ive tried but it doesnt work, any other ideas? 

[BSSCommerce-B2B]

Hi @umrraz90 , 

I have reviewed your requirement, you just need to edit css script and the issue will be resolved.  You can follow my instructions! 

Step 1: Go to Admin -> Online store -> Theme > Edit code:

Step 2: Search for the file base.css. And add this code snippet to the end of the file.

@media screen and (min-width: 990px) {
    .page-width--narrow {
        max-width: 93.5rem !important;
    }
}

Step 3: Save and reload home page.

=>> The result: 

I hope these instructions will help you. If they are helpful, please give us likes and mark as the solution.

Have a nice day sir! 

[Kyle_liu]

Hi @umrraz90 

You can edit theme code,

Add the following code at the end of the base.css file

@media screen and (min-width: 990px) {
  .page-width--narrow {
    max-width: var(--page-width);
  }
}

@media screen and (min-width: 990px) {
  .image-with-text__content {
    padding-left: 0px;
  }
}