-
AuthorPosts
-
August 27, 2022 at 2:49 pm #1362931
Hallo
ich habe
1. Ein Header mit Hintergrundbild darauf befindet sich ein Scroll down Link mit animierten Pfeil, den man ja super in Enfold einstellen kann. Aber nach die Breite unter 1024 px breite ist, springt der Pfeil aus dem Bild und geht immer weiter runter, um so kleiner der Bildschirm in der Breite wird. Bekomme es nicht hin das er wieder höher geht, also näher am Bild.
2. Habe ich einen Text und Button im Hintergrundbild, das ich so eingestellt habe das, wenn es unter 673 px ist, ausgeblendet ist und das sich eine neue Section einblendet, wo sich dann Text und Button befindet. Aber auch hier viel zu weiter Abstand nach oben, auch da bekomme ich es nicht mit CSS hin, dass es weiter oben steht.
Kann mir jemand helfen? Ich sitze schon Stunden daran und es klappt einfach nicht.- This topic was modified 2 years, 3 months ago by Highlander-2013.
August 28, 2022 at 5:28 pm #1362993Hey Highlander-2013,
Thanks for the link to your site, I see that you are using a color section with a background image, and in the color section you have a column with a text block with text and a button.
It looks like you have created similar to a Hero Header or a slider with only one image.
The problem you are having is the color section has a minimum height of 500px and the scroll down arrow is designed to show at the bottom of the color section.
So at 1024px bottom of the color section is below the image because the minimum height is 500px
At 425px mobile, your text block and button is larger than your image, so while the element minimum height is 500px the image is only about 175px
To correct this I recommend making the color section background image size contain the height of the color section so it will fill to the bottom, and moving the image position over 50% so the person will show, and moving the text block and button up. Please try this css:
@media only screen and (max-width: 1024px) { #main #av_section_1 { background-size: cover !important; background-position-x: 50% !important; } } @media only screen and (max-width: 672px) { #start-header-gesamt-box-mobil #start-header-box { margin-top: -370px !important; } }
this is the expected results for mobile 425px:
this is the expected results for mobile 1024pxpx:
Best regards,
MikeAugust 28, 2022 at 6:11 pm #1362995Hey Mike,
super, das hat so funktioniert, ohne deine Hilfe hätte ich das nicht geschafft, vielen Dank.
Beste Grüße
GuidoAugust 28, 2022 at 6:17 pm #1362996Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
AuthorPosts
- The topic ‘Abstände Mobil lassen sich nicht anpassen’ is closed to new replies.