This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Vantage: Circle icon layout and excerpt

Resolved 11 replies premiumthemetheme-vantage
tmazur
Started · Latest reply by Andrew Misplon

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;
}

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

11
  1. Andrew Misplon Staff

    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%;
}
  2. tmazur

    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) :)

  3. Andrew Misplon Staff

    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.

  4. tmazur

    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?

  5. Andrew Misplon Staff

    I think iPhone landscape is more than 680, have you perhaps tried pushing that up to say 1024?

  6. tmazur

    Yes I have, 2 column view is still visible

  7. Andrew Misplon Staff

    Please try adding !important;

    @media (max-width: 1024px) {
/* Circle Icon Widget – Loop */
.vantage-circleicon-loop .widget_circleicon-widget {
width: 100% !important;
}
}
  8. tmazur

    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;
}
}
  9. Andrew Misplon Staff

    Super, thanks for sharing. Glad that helped.

  10. tmazur

    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;
}
}
  11. Andrew Misplon Staff

    Awesome, thanks for the update, glad to hear you were able to resolve.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread