-
AuthorPosts
-
March 23, 2024 at 2:25 pm #1438043
Hi,
how can I get a setup like this:
On mobile the headline moves to the bottom of the yellow image.
I posted the link I got the idea from on private contentBest regards
- This topic was modified 9 months ago by northorie.
March 25, 2024 at 8:40 am #1438232Hey northorie,
Thank you for the inquiry.
You can replicate the layout by adding a Text Block within a Column element, apply the yellow background to the column, then go to Advanced > Developer Settings. In the Custom CSS Class name field, add “av-custom-header-column”. Then add the following code in the Quick CSS field to adjust the position of the text block within the column.
#top .av-custom-header-column .avia_textblock { padding: 40px 20px; background: white; position: absolute; right: -50px; top: 50px; }
Best regards,
IsmaelMarch 25, 2024 at 1:13 pm #1438273Wow, Ismael, thanks a lot!
I thought it would be much more difficult ;)Is there a way to geht the textbox at another place on mobile? At the bottom of the collum?
March 25, 2024 at 5:55 pm #1438290Hi,
You can do that by adding the same CSS inside of a media query:
@media only screen and (max-width: 767px) { #top .av-custom-header-column .avia_textblock { padding: 40px 20px; background: white; position: absolute; right: -50px; top: 50px; } }
Then change the values to fit your needs.
Best regards,
RikardMarch 26, 2024 at 2:18 pm #1438351thank you very much!
The left column disappears on mobile.I made the background-image and the textblock fixed. Looks great on desktop, but doesn’t work on ipad. Would you kindly check?
Hoe can I get the columns closer together?
March 27, 2024 at 7:32 am #1438405Hi,
Thank you for the update.
You can adjust the value of top and left property on smaller screens and specify the height of the column. We adjusted the css code a bit:
@media only screen and (max-width: 989px) { /* Add your Mobile Styles here */ #top .av-custom-header-column .flex_cell_inner { height: 400px; } #top .av-custom-header-column .avia_textblock { right: -50px; top: 50px; } }
Best regards,
IsmaelMarch 27, 2024 at 1:14 pm #1438443Thank you!
I needed to make a second row for the mobile view, since I wanted the background image to be fixed. But that didn’t work on mobile.Topic can be closed, i’m happy and thankful :)
March 27, 2024 at 1:22 pm #1438445Sorry, I just noticed a glitch on ipad view, which is actually the same as desktop. But the background image is at a different position.
What can I do?
The position of the picture seems not to be fixed on the tablet, as it is on desktop- This reply was modified 9 months ago by northorie.
March 30, 2024 at 8:26 pm #1438780Hi,
I viewed your link emulating the device size 768px, because I don’t have an iPad, but I’m not sure what issue you are seeing, perhaps some screenshots would help showing what you see and what you would like to see.Best regards,
MikeMarch 30, 2024 at 8:31 pm #1438783Thanks Mike, I decided to use another demo template. Thread can be closed
-
AuthorPosts
- The topic ‘Picture with headline’ is closed to new replies.