Hi,
I’m inserting masonry grids in the avia layout elements.
It looks ok on desktop view, but on mobile the transparant byline text comes over the images. And you can’t see the images anymore.
Is it possible to make all images 300px height above the byline?
example of mobile view: http://prntscr.com/b806xw
EDIT
After adding:
@media only screen and (max-width: 480px){
.av-inner-masonry-content.site-background{height: 30%;}
The height is okay but now some text falls off and elements that do not have a caption show a transparant piece of 30%
Example: http://prntscr.com/b809n1
Thank you.
Hey baswitlox,
Try reducing the padding too:
@media only screen and (max-width: 480px){
.av-inner-masonry-content.site-background{height: 30%; padding: 10px;}
}
Best regards,
Josue
Hi Josue,
1. Thank you for your reply. The padding seems to work but if the caption has more text, the text keeps falling off. You can look at the website I gave in the topic start.
Is there a way to always make all the text (title + excerpt) visible and keep the transparant part 30% of the whole image container?
So when I add more text, the image becomes longer?
2. I had a second question. When I hold my phone vertical, the title color isn’t the same as I specified in website styling. But on desktop and when I hold my phone vertical , the color is the right color. What should I do to solve this?
Thank you in advance! Awesome support!
Hi,
open a different ticket for a different question.
I can see this on mobile:
which looks ok to me. Could you fix it already?
Best regards,
Andy