How can I adjust the hero button position on Bans theme?

Technical Q&A
, , ,
1

for this website thecubanacoffee.com I need to change the button to be exactly underneath the written word cubana coffee both on the web and mobile how can I do it

2

It’s saner to edit the actual images to be proportioned to make space for calls to action.

Otherwise shifting the button down or around instantly makes the site feel cramped and badly designed.

3

Hello @tarekanani

I checked and see the banner image has text printed on the image. We can add some CSS code to adjust the button to be below the text. However, it is a little bit hacky, and if you make change to the banner, or the button, that will break.

So, if you really want to make it look best, you should consider adding a Text block above the Button, that is not only easier to organize, but also better for SEO.

4

I prefer for now to make the custom css do you have a code or something to slove it ?

5

You can use a custom css setting but I’m literally warning you I’ve seen this a thousand times sites playing designer after the fact with CSS shortcuts is shooting the site design in the foot. It undermines the brand investment and aesthetic and it rarely gets properly fixed because a band-aid was used instead of proper forethought and that becomes a deadly habit ruining good looking branding.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css

.hero-slider-content .bans-button {
    position: relative;
    top: 45px;
}
@media (max-width: 767px) {
 .hero-slider-content { 
     margin: 0 auto;
 }
 .hero-slider-content .bans-button {
     position: relative;
     top: 45px;
 }
}
1 Like
6

@PaulNewton agree :+1:

7

thank you so much guys I just need to know exactly about what you said about it will ruin the design how this will be and what do you suggest guys for overcoming this and do you recommend me to start learn coding stuff to be able to control the things I cant control on shopify themes or this will affect my work overthere will wait for your replies and solutions