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
11 years ago · Last reply by Andrew Misplon 11 years ago

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 11 years, 1 month ago

    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 11 years, 1 month ago

    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 11 years, 1 month ago

    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 11 years, 1 month ago

    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 11 years, 1 month ago

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

  6. tmazur 11 years, 1 month ago

    Yes I have, 2 column view is still visible

  7. Andrew Misplon Staff 11 years, 1 month ago

    Please try adding !important;

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

    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 11 years, 1 month ago

    Super, thanks for sharing. Glad that helped.

  10. tmazur 11 years, 1 month ago

    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 11 years, 1 month ago

    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