New Landing › How can we help? › Themeforest Theme Support › Dante › Mobile Icon Box Size

Viewing 10 posts - 1 through 10 (of 10 total)
  • Back to forum
    Posted in: Dante
  • April 24, 2015 at 3:09 pm #168260
    tsimarketing
    Member
    Post count: 267

    We have some animated icon boxes on this one page tsihealthcare.com/test/ehr. But on the tablet/iPad view some of the boxes are different sizes from the rest because the text on the front goes to two lines which makes the box longer. Is there a css code that I can use for tablet view that will make the boxes all the same length, without messing with the size of the boxes on mobile/desktop view? I have attached a screenshot of the boxes I’m referring to.

    Attachments:
    You must be logged in to view attached files.
    April 24, 2015 at 3:22 pm #168272
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Hi

    Add this to your custom css:

    @media only screen and (max-width: 479px) { 
.sf-icon-box-animated .front {
  min-height: 288px;
}
)

    – Kyle

    April 24, 2015 at 6:43 pm #168345
    tsimarketing
    Member
    Post count: 267

    That worked for allowing me to change the size. But some of the words are pushed to the right for some reason. I have attached a screenshot showing you what I’m talking about. If you look at Gastroenterology or Otolaryngology, those names are pushed to the right a little, they’re not centered in the box.

    Also how can I get the icon and name centered vertically in the box?

    Attachments:
    You must be logged in to view attached files.
    April 25, 2015 at 3:44 pm #168517
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    You could reduce the max height a bit more so that they’re centered. The words that are pushed to the right are because of the padding on the box

    – Kyle

    April 27, 2015 at 1:17 pm #169044
    tsimarketing
    Member
    Post count: 267

    Is there a code that can make the left padding smaller? I thought I had a css code for that already but I don’t think I do or I can’t find it.

    April 27, 2015 at 1:23 pm #169045
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    You do have it on line 228 of your css, but i’d recommend changing it to this:

    .page-id-785 .sf-icon-box-animated .front {
  padding: 55px 15px;
}

    – Kyle

    April 27, 2015 at 1:39 pm #169054
    tsimarketing
    Member
    Post count: 267

    Okay, and if I want it to only affect the icon boxes on mobile I should add that @media code to this front of it?

    April 27, 2015 at 1:45 pm #169056
    Kyle – SUPPORT
    Moderator
    Post count: 35880

    Yes place it in between

    @media only screen and (max-width: 479px) {

    }

    – Kyle

    April 27, 2015 at 1:59 pm #169059
    tsimarketing
    Member
    Post count: 267

    Sweet, that worked! Thanks

    April 27, 2015 at 2:10 pm #169062
    Rui Guerreiro – SUPPORT
    Keymaster
    Post count: 25779

    No problem. Thanks Kyle
    -Rui

  • Back to forum
    Posted in: Dante
Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.