Hi, I use circle icon layout for my site. Some post are skipped and yes, I have found solution here (see below).
Post are now displayed correctly in desktop version but looks rather strange when browsing on iPhone. I mean there is 3 columns layout instead of 1. It’s pretty hard to read and doesn’t look fine. Can someone help me with it?
PS I use free version (despite I bought premium) because i like mobile menu layout.
PS 2 Is there any solution to set excerpt lenght?
/* Circle Icon Widget – Loop */
.vantage-circleicon-loop .widget_circleicon-widget {
display: inline-block;
float: none !important;
vertical-align: top;
width: 33% !important;
}
Hi tmazur
Try this instead and see if it helps:
/* Circle Icon Widget – Loop */ .vantage-circleicon-loop .widget_circleicon-widget { display: inline-block; float: none; vertical-align: top; width: 33%; }Thanks! Now it looks OK on iPad (v, h) and iPhone (vertical). But… There are skipped blog entries in 2 columns responsive layout (iPhone horizontal) :)
Phew, not sure what’s up with that. All I can think of is to push things to a single column below say 680px:
@media (max-width: 680px) { /* Circle Icon Widget – Loop */ .vantage-circleicon-loop .widget_circleicon-widget { width: 100%; } }Adjust 680px according to where you’d like to see the layout shift to a single column.
Thank you. Almost done :) This switches to one column view on iPad (which is great in vertical mode, thx!) but unfortunately, when I resize window below 640 (and horizontal orientation on iPhone) still displays 2 columns with messed entries :P Is there any option to switch off 2 column view totally?
I think iPhone landscape is more than 680, have you perhaps tried pushing that up to say 1024?
Yes I have, 2 column view is still visible
Please try adding !important;
@media (max-width: 1024px) { /* Circle Icon Widget – Loop */ .vantage-circleicon-loop .widget_circleicon-widget { width: 100% !important; } }Cool! It works! 1 or 3 column view, no skipped posts. Than you very much.
I have added this:
/* Circle Icon Widget – Loop */ .vantage-circleicon-loop .widget_circleicon-widget { display: inline-block; float: none; vertical-align: top; width: 33%; } @media (max-width: 1024px) { /* Circle Icon Widget – Loop */ .vantage-circleicon-loop .widget_circleicon-widget { width: 100% !important; } }Super, thanks for sharing. Glad that helped.
One more thing ;)
I have changes two things (because there were skipped posts again). Below final code that is optimal for my site.
Changes:
width: 1; (instead 33%)
and
@media (max-width: 820px) (instead 1024px)
/* Circle Icon Widget – Loop */ .vantage-circleicon-loop .widget_circleicon-widget { display: inline-block; float: none; vertical-align: top; width: 1; } @media (max-width: 820px) { /* Circle Icon Widget – Loop */ .vantage-circleicon-loop .widget_circleicon-widget { width: 100% !important; } }Awesome, thanks for the update, glad to hear you were able to resolve.