-
Posts
-
Hello,
Perhaps there is a very easy solution, but I have spent a lot of time on various options and search for answers among all support topics, and I can’t find the solutions. Hopefully you can help me with this.It is about 3 things:
1 – Alignment of 6 images
2 – keep text within the text box
3 – Align from the left white text in text boxOn the home page I have six areas (made with a grid row), of which 5 are an image, and one is an image with text and a button.
1 – One way or another, I can not get them aligned. I’ve tried to replace the gray background image with a background color, but than the area of this box gets very large. So i placed a grey image with exact the same size as all the other images, but I can’t get theme inline. So how can i do this?
2 – The text in the grey area, which starts with “Onze producten zijn te vinden…”, doesn’t stay in the grey area when the screen gets larger. The text should always remain in this area (text block), whether it’s big or small screen. Is that possible?
3 – On the 5 images, which function as a button, the white text is misaligned. This text should align from the lower left corner. Now it looks like it is aligned from the center, how can i change that?
Hopefully you can help me out. Thanks in advance!
Eline
Hey Eline!
Sorry for the late reply!
1- It seems like you were able to align your image above your footer? If not, please post the link to your page
2- Please add following code to Quick CSS.page-id-3596 #av-layout-grid-2 .flex_column { background-size: cover; }3- Can you please point out your text?
Cheers!
YigitHi Yigit,
Thank you for your answer. I think I didn’t explain point 1 very well.At the home page I have six rectangles, which (should) look the same and must scale in a similar way when the screen expands and contracts, but that is not the case now.
I’ve three srceenshots to show what happens.
Thank you for the CSS for point 2, but I have the same problem om another page. Is there anther way that i can build a colored text box, which functions like this. Maybe I didn’t do in the right way. If there is. please let me know.
Here two screenshots from the page http://www.meander-bv.nl/collecties/
and for point 3, I mean the white caption text on the photo. I would like to align the text from the left and in every image at the same distance.
I tried it with this, but it doesn’t give the right result.
.av-image-caption-overlay-center {
display: block;
width: 52%;
bottom: 20px;
left: -40px;
position: absolute;
}Hi!
please open different tickets for different questions. Otherwise it gets very confusing for us and other people trying to search for answers in this forum.
1.) I checked your website but this issue does not happen for me when I resize my browser. Both columns have 50% width all the time for me. Which OS and browser are you using?
Cheers!
AndyHi Andy,
I am sorry I have seen other people combine questions and I thought that the problems with the layout might have to do with each other, thats the reason why I put it in one ticket. And I understand that you are probably very busy with answering all these questions, so I thought it would save you time. But I understand that I have to split it up in separate tickets, so this is ticket for 1.)To check this, i used Google chrome and safari and I have OS X El Capitain. Also on mobile (iphone 6) same problem occurs.
The grey box is not behaving the same like the other boxes.Hey!
can you create us an admin account please? post login details here as private reply.
Regards,
AndyHey Andy!
Sorry that it took me some time, the project was delayed, but now I am working on it again.
I have made an admin account for you. Hopefully you can help me with this strange problem.
In the past days i have been trying to solve it, but nothing worked.Best wishes, Eline
Hey!
1. The text elements do not scales with the same ratio as images do. So there is no easy way to scale the text area with the images and maintain the same scale ratio. You may need to replace the text with a image and only use the search form with the button on it. Or hire a freelancer to accomplish it as it will take a lot of time to achieve it.
2.
For The text overflow issue on the collecties page we added a custom class “collection-text” and added the below css in Quick CSS. Please add the custom class to other text box on the page..collection-text { max-width: 520px; }Regards,
Vinay
- The topic ‘How to place a background image inline with text and surrounding images?’ is closed to new replies.