moving button under banner onto the banner and change colour

Store Design
,
1

Hi, I’ve had to make 2 separate banners for my mobile and desktop view. but I can’t add the button onto my banner picture like the original banner. and it’s also turned black after adding the link to the button. I’d like to change it to the same blue as the top announcement bar. can someone please help me with moving the button onto the image and changing the picture. Thanks in advance!

site: moimeme.com.au

code: Kbf295GhpF113

2

Hello @MelissaM92

  1. moving the button to the banner in mobile view

Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> section-image-banner.css
add this code at the end of the file.

.banner__buttons {
    padding-bottom: 75px;
}
.banner__box {
    position: absolute;  
}
  1. changing the color of the button
    Go to online store ----> themes ----> actions ----> edit code---->base.css
    add this code at the end of the file.
.button, .shopify-challenge__button, .customer button {
background-color: rgb(164 209 221);
}
.button:after, {
box-shadow: none;
}

result

8.png
8.png442×655 217 KB

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

3

Thank you for your quick response @Rahul_dhiman , is there anyway the button could be moved so its not on the person? could it be moved to where the pink section is?

4

Yeah Sure.
Please ignore the previous code sent by me and add this code
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> component-card.css
add this code at the end of the file.

@media only screen and (max-width: 768px) {
.card-information>.price {
color: black !important;
}
.card__heading {
color: black;
}

result

11.png
11.png467×621 181 KB

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

5

thanks for the new code @Rahul_dhiman . I tried it 2 different times and unfortunately it didn’t work :disappointed_face:

6

sorry, actually the brace at the end was missing.
you can use this code.

@media only screen and (max-width: 768px) {
.card-information>.price {
color: black !important;
}
.card__heading {
color: black;
}
}

Thanks