-
Posts
-
Hello,
I like very much your theme, but I have a display problem on screen and devices (max-width: 767px) caused by the element “Blog Posts” with setting “Grid Layout – 5 columns.”
The first blog article has a width of 100% while the others have 48% width.
I tried with this CSS@media only screen and (max-width: 767px) { .responsive #top #wrap_all .avia-content-slider-odd .slide-entry.slide-parity-even{margin-left:4%; clear:none;} .responsive #top #wrap_all .avia-content-slider-odd .slide-entry.first{width:48%;} }but it creates confusion with the alignment and margins of the other articles.
The problem occurs with 3 column layout also: for each group of 3 articles, the first one has 100% the two other 48%.
Can you help me please? Thank you in advance
MarcellaHi!
What change would you like to happen? The default layout is the make the first one in the series bigger on mobile devices so its just a matter of changing it how you want.
Cheers!
DevinHello Devin, thanks for your attention!
I would simply like that every item had the same width (48%): it doesn’t look good and mainly does not make sense that – in the case of three column layout – only the first, third, sixth, ninth article, etc. are larger.
Or – in the case of five column layout – the first, fifth, tenth article, etc..
So can you please show me how to change the css to make posts display uniform and in the same way?
Thanks & regards! :-)
MarcellaThis is the best I can come up with but it won’t have great cross browser compatibility or IE8 compatibility:
@media only screen and (max-width: 767px) { .responsive #top #wrap_all .slide-entry { width: 48% !important; margin-left: 0 !important; clear: none !important; } .responsive #top #wrap_all .slide-entry:nth-child(even) { margin-left: 4% !important; } .responsive #top #wrap_all .slide-entry:nth-child(odd) { margin-left: 0% !important; clear: left !important; } }Otherwise your best route would be a freelance web developer who can customize the output to be fully built into the element.
Hi Devin,
thanks for you help but there is still a gap after the fifth element and the first of the next group (slide-entry-wrap). I think I will use only even columns grids….
Kind regards
MarcellaHey!
Did you remove the blog grid element? There’s an issue on your website using Chrome where the header shadow is being duplicated when you scroll the page. Please add this on Quick CSS:
#header_main_alternate, #header { -webkit-transform: translateZ(0); }Best regards,
IsmaelHi Ismael,
thank you very much for the header shadow code! :-)
No, I didn’t remove the blog grid element, I use it with 4 columns instead of 5! But if you want to perform any test I will temporary switch on 5 columns or create a new page for your testing. Just let me know.
Thanks, regards.
MarcellaHi Marcella!
Please do so and post the link to your page here or if you do not mind, please create a temporary admin login and post it here privately so we can look into it
Best regards,
YigitHi Josue,
as you can read on my previous post, that’s what I’ve done. But using even columns is not resolving the problem: is avoiding the problem! ;-)
In any case, there is still a space between each group of 4 (or 6) elements.
Regards,
MarcellaHey!
Please add following code to Quick CSS and change page id
@media only screen and (max-width: 768px) { .page-id-1573 article { width: 71%!important; margin: 0!important; }}You can right click on Chrome or Firefox to inspect elements to find page ID’s http://i.imgur.com/HyPTCRg.jpg
Best regards,
Yigit
- You must be logged in to reply to this topic.