How to left align text to the bottom of a section

[emilyaugstudios]

Hi everyone, is it possible to left align text to the bottom of a section. Im using Symmetry theme.

URL – https://pantee.co.uk/?_ab=0&_fd=0&_sc=1

Current look –

What we are trying to achieve –

[parth_ghelani]

Hello @emilyaugstudios

You can show the content at the bottom left side by following below steps:

1. Go to admin > Online store > edit code.

2. In code directory, find the file named “main.css” and open it.

3. Copy below given code and paste it at the end of above mentioned file.

@media (min-width: 750px) {
  .section-video-with-text .flexible-layout .column--half {
    align-self: flex-end !important;
    text-align: left !important;
  }
}

4. Don’t forget to save the file after making changes.

Hope this solution works best for your issue.

If you have any other queries, then just DM me !

[BSSCommerce-HDL]

Hi @emilyaugstudios ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[Sweans]

Hi @emilyaugstudios ,

To align the contents provided as per your need, follow the steps below.

Go to your online store> themes > Click on three dots of current active theme > edit code > search main.css in the left sidebar > open it and paste the code.

@media (min-width: 750px) {
#shopify-section-template--17248791625943__video_with_text_xAHVat .flexible-layout .column--half {
text-align: left !important;
align-self: flex-end !important;
  }
}

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans

[Rahul_dhiman]

Hello @emilyaugstudios
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> main.css
add this code at the end of the file.

.column.column--half.align-ltr-center.cc-animate-init.cc-animate-in {
align-self: flex-end;
text-align: left !important;
font-family: emoji !important;
font-size: 13px;
}
h2.majortitle.in-content.h1 {
font-style: italic;
text-transform: lowercase !important;
font-family: 'Proxima Nova';
font-size: 29px !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks