-
Posts
-
Hello everyone,
hello Mike,First of all, I would like to thank you guys for the great support in this forum!
I have two layout questions.1. What is the best way to combine text and images?
I tried to mix text and images using several layout elements. However, it feels like my solution is by far not the best.
Concerning the responsivess there are some issues. For example, depending on the device/browser window size the headlines do not have the same space to the previous text elements. The overall presentation feels a bit odd and it looks strange. I assume that I have to combine text and images in a completely different way.2. How can I change the settings to show an image above other elements?
On another page of my website I have one image, some text and a form. On my desktop PC is looks great and also on the smartphone it is perfect. I only need help to change the settings in order to show the image not at the of the page. I would like to show it somewhere above the form, but I have no clue how to do that.I hope that you can give me some advice.
Thank you very much in advance.
Best regards
willbaerHey willbaer,
Sorry for the very late reply and thanks for the screenshots.
For question 2 to move the image on top for the page /kontakt/ on mobile please try this css:@media only screen and (max-width: 767px) { #top.page-id-156 #av_section_1 .entry-content-wrapper { display: flex !important; flex-wrap: wrap !important; } #top.page-id-156 #av_section_1 .flex_column.avia-builder-el-first { order: 2 !important; } #top.page-id-156 #av_section_1 .flex_column.avia-builder-el-last { order: 1 !important; } }For question 1 for the page /uebermich/ please try using a grid row element with the text in one cell and the image in the other cell so the image is closer to the text an about the same size, I beleve this is what you are asking.
If you are not sure what I mean try cretaing a copy of the page to a test page and include an admin login so we can demonstrate.Best regards,
MikeHey Mike,
no worries, I was quite slow this time.
2. How can I change the settings to show an image above other elements?
First of all, I would like to thank you for the CSS code. It works great!1. What is the best way to combine text and images?
You are right, the gird seems to be the element I am looking for. I have tried several things with the grid, but I still have some issues with it.
– The picture/text-relation is on some display sizes still weird. Is there a way to change the settings that it looks more professional (even though I am a beginner)? See screenshot 1.
– I have also problems to achieve the same width, combining grid row and normal layout elements. I have combined them, because the second section shall fill 3/5 in the center of screen. Is there any way to combine these elements achieving the same width? Or can I somehow change the settings of the grid row element to do this?Thank you very much in advance.
Best regards
MichaelHi,
Thanks for the screenshot, for the difference in the width of the 1/2 column & 2/3 column in the grid row and the 3/5 text column below it, I believe the 3/5 column below the grid row has some padding, do you want the grid row 1/2 image & 2/3 text columns to be the same width as the text below or the other way around?
You could adjust the inner padding of the columns to suit at column ▸ layout ▸ padding or try adding another cell to your grid row so you have 1/5 – 3/5 – 1/5
and then place your image and text in the 3/5 and leave the two 1/5 empty and then use this same setup below instead of the color section:
And for the empty space below the text next to the image , depending on how much text you have you could add inner padding to the column with the text, in my test 7% left & right padding helped. You can change the padding for each screen size.
Best regards,
Mike
- You must be logged in to reply to this topic.