Change position of second text and button on image banner - Dawn theme

[benshop7]

Hello, I have added a second text block and a second button block on to my image banner. This screenshot shows the ‘Desktop content position’ set to ‘Top Left’, and ‘Desktop content alignment’ set to ‘Left’:

However, I want to be able to override these settings for my second text and second button blocks and have these positioned at the Bottom Right and with Right alignment - as per this photoshopped mockup:

Nb. I only need this to be the case on desktop, not mobile. Site: https://1b4c40.myshopify.com/ password: sowbeu

I don’t know CSS particularly but by taking snippets from searching this forum, I made the following changes to achieve what I’ve got so far. It seems to work, but please let me know if you recommend a different way…

1. To shift the default positioning of ‘Top Left’ (further to left) and ‘Bottom Right’ (further to right), I added the following to the bottom of base.css:

@media (min-width: 768px) {
.banner__content.banner__content--top-left {
    align-items: flex-start;
    justify-content: left;
    margin-right: 35%;
}
.banner__content.banner__content--bottom-right {
    align-items: flex-end;
    justify-content: right;
    margin-right: 0%;

2. To add the second text block, I changed this to ‘2’ in image-banner.liquid:

3. To position the 2nd button below 2nd text block, I changed this to ‘2’ in image-banner.liquid:

I added this 2nd button block rather than try to adjust the “Second button” of 1st button block. Thus, the lower button showing on the screenshot is actually the “First button” of the 2nd button block.

Very grateful for any help.

[BSS-Commerce]

Hi @benshop7 ,

@media screen and (min-width: 750px) {
.banner__content.banner__content--top-left {
       margin-right: 0px;
} 

.banner--content-align-left.banner--desktop-transparent .banner__box {

       width: 100% !important;
       padding: 0px;

       max-width: 100%;

}

.banner__heading.inline-richtext.h1 {

      max-width: 60rem;

}

.banner__box .banner__text:first-child {

      max-width: 60rem;

}

.banner__box .banner__text:last-child {
      width: 100%;

      margin-top: 300px;

​​​​​​​      display: flex;

​​​​​      justify-content: right;

}

.banner__box .banner__text:last-child > p {

     max-width: 60rem;

    text-align:right;

}

.banner__box .banner__buttons:last-child {
      text-align: right;
      width: max-content;
​​​​​​​      margin-left: calc(100% - 23rem);

}

}

You can add the other code to the file assets/section-image-banner.css and I checked and the result is as follows:

We hope the above suggestions can help you @benshop7

[benshop7]

Thanks very much for responding. This has helped.

I found I had to change .banner__box .banner__text:first-child {

to .banner__box > *:nth-child(2) {

and .banner__box .banner__text:last-child {

to .banner__box > *:nth-child(4) {

and .banner__box .banner__text:last-child > p {

to .banner__box > *:nth-child(4) > p {

Cheers