Position heading in the image banner to the right upper corner

[JordanGabe]

Hey! I'd like to position the heading text and button in the image banner to the right upper corner. Both on desktop and especially on mobile view.

 my website url is https://charmflowerstudio.com/

[kazi]

Hello @JordanGabe  add this css bottom of file  assets > base.css

.banner .banner__content {
align-items: start !important;
}

[PageFly-Richard · Accepted solution]

Hi @JordanGabe 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
div#Banner-template--22513200824631__aa389062-33ed-40aa-9fe0-684aefc5ffb0 .banner__content {
    align-items: start !important;
}
</style>

Additionally, while investigating the issue, I've had some suggestions for you, that might help it make your store more profressional.

My suggestion is: to highlight the product price here, and add the review star below it.

Including review stars can enhance customer trust in your product, while highlighting the price will make it easier for customers to locate the product's pricing.

Hope this can help you solve the issue 

Best regards,

Richard | PageFly 

[JordanGabe]

Hey Richard! Thank you a ton for your suggestions and code, the code worked! And I'll make sure to implement your amazing suggestions, also one more thing how can I stack the the text on the banner "5 Stars" to be a line above "on Google Maps". Like this:

5 Stars

on Google Maps

[Team_OSC]

Hi @JordanGabe 

Online store > customizations > select image banner section > set this (for desktop):

For mobile:

Online store > themes > edit code > assests > base.css > paste this code:

@media screen and (max-width: 768px) {
    .banner .banner__content {
        align-items: start !important;
    }
}

Let me know if it is useful by like and accept my solution.

Regards

Team_OSC