-
Posts
-
Hey, I have a question.
I have a section with 5 columns. In the column options I can say they shall break at mobile or tablet width. If I take mobile the content is at some resolutions overlapping. If I take the tablet option it does look a bit empty.Is there a way with a custom css to bring these columns to a 50% width between a width of 768px and 1120px and let the behaviour for the rest as set before?
Everything I’ve tried before brought strange results. I’ve tried a max-width with width set to 50% in css for example. The breakpoint was earlier that way but the content didn’t change to a 2 column view.
Maybe someone has an idea for that?
Thanks
Hey aicompcloud,
Can you please show us your code so we can try work things out?
Best regards,
BasilisThese were the attempts I worked with, both tested also with #top:
first attempt:
@media only screen and (max-width:1120px) and (min-width:768px) {
.flex_column.av_one_fifth {
width: 50%!important;
}
}
second attempt:
@media only screen and (max-width:1120px) and (min-width:768px) {
.flex_column.av_one_fifth {
width: 47%!important;
float:left;
margin-right: 3%!important;;
}
}The breakpoints worked for these widths but the single columns didn’t rearranged themselves to two columns. They were among themselves but from the second column they moved a bit more to the right. What looked silly too.
I would be glad if we find a solution. But I also think if the container are overlapping at certain resolutions there should be a rethinking of the media queries for the whole theme. Maybe an update thing?
Best regards,
PatricHi,
Is there a way with a custom css to bring these columns to a 50% width
What do you intend to do with the 5th column? If the width of each column is 50%, the last column will be pushed out of the row. Please hide these columns on mobile view then create another set of columns.
Best regards,
Ismael
- You must be logged in to reply to this topic.