Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • September 19, 2014 at 7:25 pm #322083
    nini_bacher

    Hello Support team,

    I have a question that is connected to my earlier topic #318630.

    The icon box titles have display problems when it comes to some browser window sizes.

    This code:

    @media only screen and (max-width: 480px) {
h4.iconlist_title { font-size: 12px; }}

    led to a correct display on mobile phones.

    But still, in between 785 px 1010px browser-window-width letters from the end of the titles are cut off.

    I look forward to your response!

    September 20, 2014 at 8:35 am #322224
    Ismael

    Hey nini_bacher!

    Thank you for using Enfold.

    Maybe this will help:

    @media only screen and (max-width: 1024px) {
h4.iconlist_title { font-size: 13px; }}

    Cheers!
    Ismael

    September 21, 2014 at 3:24 pm #322638
    nini_bacher

    Hello Ismael,

    thank you for your response. I added the code but doesn’t solve the problem. Do you have any other suggestions?

    September 22, 2014 at 4:30 am #322773
    Josue

    Hey!

    Try with this code instead:

    @media only screen and (max-width: 1139px) {
    h4.iconlist_title { font-size: 13px ; }
}

    Cheers!
    Josue

    September 22, 2014 at 9:31 am #322869
    nini_bacher

    Hey Josue,

    thnak you for the new code. I implemented it and the problem stays the same: in some browser-window sizes the text is cut off.
    Is there a possibility to shift all icon boxes to the end of the page, when it is not possible to display them correctly?

    Thank you for your help!

    September 22, 2014 at 4:12 pm #323105
    Yigit

    Hey!

    Please try adding following code to Quick CSS as well

    @media only screen and (max-width: 990px) and (min-width: 768px) {
.iconlist_icon.avia-font-entypo-fontello { margin-right: 2px; }
.entry-content-wrapper li { margin-left: 0; }
h4.iconlist_title { font-size: 11px; }}

    Best regards,
    Yigit

    September 22, 2014 at 6:12 pm #323200
    nini_bacher

    Hello Yigit,

    thank you for your reply, I added the code but still, it doesn’t work. The words are still cut off in some browser window sizes (that may be relevant when it comes to tablets).

    Do you have other suggestions?

    Thank you!

    September 22, 2014 at 9:58 pm #323312
    Josue

    Hey!

    You can add this:

    @media only screen and (max-width: 990px) and (min-width: 768px) {
    .responsive .container .one.unit,
    .responsive .container .one.units,
    .responsive .container .two.units,
    .responsive .container .three.units,
    .responsive .container .four.units,
    .responsive .container .five.units,
    .responsive .container .six.units,
    .responsive .container .seven.units,
    .responsive .container .eight.units,
    .responsive .container .nine.units,
    .responsive .container .ten.units,
    .responsive .container .eleven.units,
    .responsive .container .twelve.units,
    .responsive #top #wrap_all .flex_column {
        width: 100%;
        margin-left: 0;
        margin-bottom: 20px;
    }
}

    That will make columns collapse on 990px instead of 767px.

    Best regards,
    Josue

    November 2, 2016 at 6:13 pm #707293
    wdwalrus

    Titles in icon-boxes are getting cut off at 320px on mobile. Is there a way to reduce font-size at 320px? I’m having trouble targeting the h3 tags.

    November 3, 2016 at 7:34 am #707597
    Rikard

    Hi,

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

    @media only screen and (max-width: 320px) {
.iconbox_content_title {
  font-size:12px !important;
}
}

    Best regards,
    Rikard

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