How to move text up on hero image? Flex Theme

Store Design
1

Is it possible to move the hero text up? picture attached

dfgdf.JPG
dfgdf.JPG1708×952 171 KB

website: www.ecogarby.com

Password: ddd

2

find your ‘styles.css’ code and find the following code:

@media only screen and (min-width: 481px)
.block__image-with-overlay .caption.align-middle, .image-slideshow .caption.align-middle, .image-with-text-overlay .caption.align-middle {
    top: 50%;
    transform: translate(0,-50%);
}

and change the ‘top:’ value to a smaller percentage

3

khgamujtaba_0-1640201484994.png
khgamujtaba_0-1640201484994.png1267×419 268 KB

You need to add the “margin-top” code here and it will work fine…However, if you only want to change the position of the heading, then you need to need the styling of “span” because the heading is part of “span”.

Let me know if the issue is resolved. If not, feel free to leave a message

4

If you use the previously suggested method, the mobile version won’t display correctly, using negative %'s isnt reccommended as it doesn’t translate well to other browser sizes.

There is already the set styling of ‘top’ as i previously mentioned, simply changing this value will make a scalable change across all browser sizes