Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • October 12, 2017 at 10:20 pm #863641
    4ROI

    I am having a problem with the icon boxes. Because the theme is responsive the boxes get really skinny and the text starts to get cut off before it changes to the mobile version where boxes are listed under each other. I need to adjust this so it breaks sooner.

    here is a short screencast explaining the issue more clearly http://screencast-o-matic.com/watch/cb6lYDImej

    • This topic was modified 7 years, 6 months ago by 4ROI.
    October 14, 2017 at 6:37 am #864201
    Rikard

    Hey 4ROI,

    Thanks for the screencast. Could you post a link to the site in question so that we can take a closer look please?

    Best regards,
    Rikard

    October 16, 2017 at 8:26 pm #864926
    4ROI

    Thanks for getting back to me Rikard, The website is in development, the link is being sent privately

    October 19, 2017 at 4:30 am #866046
    Ismael

    Hi,

    Thank you for the info. And we are very sorry for the late response.

    Please use the following css code to adjust the size of the columns when the screen width is equal or less than 1024px which is the standard size of most tablets.

    @media only screen and (max-width: 1024px) {
    .responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
        margin: 0;
        margin-bottom: 20px;
        width: 100%;
    }

    .responsive #top .flex_column_table_cell {
        display: block;
    }
}

    Best regards,
    Ismael

    October 19, 2017 at 4:59 pm #866312
    4ROI

    Hi Ismael,
    Thanks for getting back to me. I tried adding the css and it does not work. I did add some css to adjust the heading size as well. here is everything I have in the custom css right now. I am testing screen sizes in http://quirktools.com/screenfly/ and still see the same issues on some screen sizes.

    @media only screen and (max-width: 1024px) {
    .responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
    margin: 0;
    margin-bottom: 20px;
    width: 100%;
    }

    .responsive #top .flex_column_table_cell {
    display: block;
    }
    }`

    @media only screen and (max-width: 1200px) {
    h2.avia-caption-title {
    font-size: 48px !important;
    }}
    @media only screen and (max-width: 1325px) {
    .avia-caption-content {
    font-size: 35px !important;
    }}
    @media only screen and (max-width: 1100px) {
    .avia-caption-content {
    font-size: 25px !important;
    }}
    @media only screen and (max-width: 900px) {
    h2.avia-caption-title {
    font-size: 42px !important;
    }}
    @media only screen and (max-width: 875px) {
    .avia-caption-content {
    font-size: 20px !important;
    }}
    @media only screen and (max-width: 875px) {
    h2.avia-caption-title {
    font-size: 38px !important;
    }}
    @media only screen and (max-width: 767px) {
    .avia-caption-content {
    font-size: 18px !important;
    }}
    @media only screen and (max-width: 769px) {
    h2.avia-caption-title {
    font-size: 25px !important;
    }}
    @media only screen and (max-width: 479px) {
    .avia-caption-content {
    font-size: 14px !important;
    }}
    @media only screen and (max-width: 479px) {
    h2.avia-caption-title {
    font-size: 20px !important;
    }}

    October 21, 2017 at 5:22 am #866948
    Ismael

    Hi,

    There’s a back quote right after the css modification. Please remove it.

    .responsive #top .flex_column_table_cell {
display: block;
}
}"BACKQUOTE HERE"

    Best regards,
    Ismael

    October 23, 2017 at 11:10 pm #867871
    4ROI

    I removed it, but it didn’t improve it. The blocks did change, but are more cramped now and still have overflow of text in some views

    October 24, 2017 at 6:49 am #867998
    Ismael

    Hi,

    Thank you for the update. Please post the login details in the private field so that we can check the css modifications.

    Best regards,
    Ismael

    October 24, 2017 at 8:26 pm #868363
    4ROI

    here you go

    October 26, 2017 at 7:27 am #869090
    Ismael

    Hi,

    Thank you for the info. There are missing curly braces in the css media query when we checked the css modifications. Please remove browser cache before checking the page again.

    Best regards,
    Ismael

    October 26, 2017 at 8:08 am #869119
    4ROI

    still not working, but I am going to change the design, so i won’t have to deal with these boxes.

    October 28, 2017 at 3:12 pm #869912
    Ismael

    Hi,

    Alright. Let us know if you need anything else.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Problem with icon boxes in responsive’ is closed to new replies.