Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • November 28, 2017 at 10:41 pm #882904
    darkfashion

    Hi.

    I have 3 icons next to each others inside a color section. and to have some free space , I have put everything in 1/5 containers.

    It looks good on desktop, but on my S7 the icons are overlapping.

    Here are 3 different print screens. enfold editor, desktop front and S7 front.

    https://ibb.co/gHgjiR.

    Is there a way to resize the icons and the text by custom CSS?

    thanks in advance!

    November 29, 2017 at 8:08 pm #883156
    Victoria

    Hey darkfashion,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    November 29, 2017 at 9:54 pm #883196
    darkfashion

    Hi Victoria. https://bakertillysydost.se/revisionsbyra/

    December 1, 2017 at 10:49 am #883811
    Rikard

    Hi,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
.post-entry-571 .av-icon-char {
    font-size: 20px !important;
    line-height: 20px !important;
    width: 20px !important;
}
}

    Best regards,
    Rikard

    December 1, 2017 at 2:14 pm #883899
    darkfashion
    This reply has been marked as private.
    December 2, 2017 at 2:12 pm #884117
    Rikard

    Hi,

    I can see the code applying on the page in private, could you check again please? There is no overlapping on any screen size on my end.

    Best regards,
    Rikard

    December 2, 2017 at 6:42 pm #884171
    darkfashion

    Hi Rikard.

    The overlapping is not there, because they are on separate rows on responsive / samsung s7.

    The idel is if they can be next to each other. I can understand that 3 icons on a row is maybe too much to ask, but at least 2?

    https://ibb.co/fy1hQG
    https://ibb.co/m5Jkeb

    Thank you for your time!

    December 5, 2017 at 4:43 pm #885142
    Victoria

    Hi darkfashion,

    If we make the width of the div 50% it will look like this
    Image 2017-12-05 at 16.41.38.png
    You have empty divs to position, I could try to adjust, but the caching plugin is making my work very hard. Can you please disable it for now?

    Best regards,
    Victoria

    December 5, 2017 at 4:49 pm #885144
    darkfashion

    W3 total cache de-activated = )

    In my samsung they are aligned vertical. the “redovisning” is little offset

    Thank you Victoria.

    December 6, 2017 at 11:55 am #885516
    Victoria

    Hi darkfashion,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
@media only screen and (max-width: 767px) {
  .responsive #top #wrap_all .flex_column.av_one_fifth {
    width: 45%;
    margin-left: 5%;
  }
  .responsive #top.page-id-571 #wrap_all .flex_column.av_one_fifth.avia-builder-el-1, 
  .responsive #top.page-id-571 #wrap_all .flex_column.av_one_fifth.avia-builder-el-10 {
    display: none;
  }
  #av_section_1 .entry-content-wrapper.clearfix {
    margin-top: 20px;
  }
}

    If you need further assistance please let us know.
    Best regards,
    Victoria

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.