Tagged: CSS
Hey there,
I am struggling with the following element on its mobile display. Actually, I cant make out how to reduce the white space under the heading element. (screenshot here: https://www.weingut-christ.de/wp-content/uploads/2019/04/Screenshot_20190419-202323_Chrome.jpg )
Do you have an idea how to make them appear without this white space?
Thank you in advance and kinds regards
Marcel
Hey Marcel,
I can’t see the elements in your screenshot on your front page, on which page can we see them?
Best regards,
Rikard
Hey Rikard,
you need to test it on smartphone or use this tool, for example:
http://mobiletest.me/iphone_5_emulator/?u=http://www.weingut-christ.de
I mean the 4 elements (called Weißwein, Rotwein, Roséwein, Weinpakete) with icons. I do not mean the ones which appear on desktop. The menu switsches from pictures to icons.
Do you have an idea how to make them appear without this white space?
Hi,
I took a look at your elements and found that you have this css causing the large white space:
@media only screen and (max-width: 767px) {
#av_section_3 .flex_column_table .flex_column.av_one_fourth:nth-child(odd) {
width: 48% !important;
float: right !important;
padding: 20px 1px 1px 1px !important;
min-height: 268px !important;
}
}
Please note your min-height: 268px !important; is forcing a min-height, 160px would be better, as long as it doesn’t effect other elements.
Please try to make this adjustment and clear your browser cache.
Best regards,
Mike