Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 13, 2015 at 5:04 am #486910
    Michae1

    There are a LOT of issues with the responsive / mobile version not scaling properly. Primarily with the icon boxes.

    I just made a screencast as that seems easier to explain what I mean. I’ve checked this on both the iPhone 5 and Samsung Galaxy 6 Edge. Both have the same issues.

    http://screencast.com/t/TT8HI2kqw

    August 13, 2015 at 7:59 am #486979
    Basilis

    Hi Michae1!

    Can I ask, if you use the same elements, without any modifications, does the same issues still happening?
    Let me know please.

    Regards,
    Basilis

    August 13, 2015 at 8:35 am #487014
    Michae1

    Hi Basilis,

    They do it even when not modified. But this is really weird. In the last hour, all those things that were consistently screwed (as in the screencast) have “automagically” fixed themselves.

    Did you guys do anything to the back end? Seems weird for it to consistently be broken, and then just “poof” it’s fixed :) I’m not complaining, just want to get to the bottom of it, so I can prevent it from happening in the future.

    Only three very small tweaks remain :

    1) The Social “Sonar” icons at the bottom of the home page (not the footer, the ones just before it) are stacking vertically on the mobile device. How can I force them to remain side-by-side but just shrink them to fit the screen?

    2) There is no padding/space between the very last Icon Box “Your Office” and the previous Icon box, though the rest are aligned fine.

    3) The footer text is not aligned properly. Copyright info sits higher, as though it’s “top” aligned” and “social icons” in the footer

    Oh, and (4) still need to enlarge Title text on main slider of splash image (just for mobile) targeting with @media doesn’t seem to work.

    • This reply was modified 9 years, 3 months ago by Michae1.
    August 14, 2015 at 5:51 am #487547
    Rikard

    Hi,

    1. Please try the following in Quick CSS:

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

#av_section_6 .av_one_fifth {
    width: 15.2% !important;
}
}

    2. Add the following CSS as well:

    @media only screen and (max-width: 767px) {
#av_section_4 .avia-builder-el-last {
    padding: 40px 50px 50px 50px !important;
}
}

    3. I couldn’t see anything misaligned in the footer, could you send us a screenshot please?

    4. Add the following CSS as well:

    @media only screen and (max-width: 767px) and (min-width: 480px) {
.responsive #top .slideshow_caption h2 {
    font-size: 30px !important;
}
.responsive #top .slideshow_caption .avia-caption-content {
    font-size: 18px !important;
}
}

    Thanks,
    Rikard

    • This reply was modified 9 years, 3 months ago by Rikard.
    August 17, 2015 at 5:16 am #488546
    Michae1

    Thanx Rikard! Almost there . . .

    1) It PARTIALLY worked. https://drive.google.com/file/d/1_RN-rPocyUdFIDon724ApBQuXddn5YkgGQ/view?usp=sharing
    The icons become closer together, which is good, but they’re not evenly spread according to how wide the screen is, which is bad. Also the circles around the icons don’t get smaller at all, so when looking at it vertically on the phone, they’re overlapping.

    2) No luck. https://drive.google.com/file/d/18LGK1HrG4sKlfo6aLKcpBoK8bfLpqT4bGQ/view?usp=sharing

    3) The “Copyright” sits higher than the “Social Icons” in the footer. I’d like them both centered vertically : https://drive.google.com/file/d/1_RN-rPocyUdFIDon724ApBQuXddn5YkgGQ/view?usp=sharing

    4) Perfect! Thanx!!

    August 17, 2015 at 7:24 am #488614
    Basilis

    Hi!

    I can see that there are customizaations which most probably control the elements and our custom code is not working.
    That requires more time from us to find the issue and debug it.

    You can contact one of our Customization Contractors, who will help you out with the process.
    http://kriesi.at/contact/customization

    Let us know if we could do anything else, regarding our theme

    Regards,
    Basilis

    August 17, 2015 at 8:21 pm #489106
    Michae1

    Really? Everything we DO here is a “customization” :(

    Can you at least point me the right direction? Even with a general description of what I need to adjust, I can probably hunt it down.

    Before I ever even post a question here, I spend a lot of time in Chrome Dev Tools trying to track down the correct class to adjust.

    Any help you can provide would be appreciated. Thank you.

    August 18, 2015 at 11:58 am #489411
    Rikard

    Hi,

    1. Try to decrease the values to see if you have any luck with that. Just a note here, there’s a reason why the are displayed full width on mobile :)

    2. Try the following instead:

    @media only screen and (max-width: 767px) {
#av-layout-grid-3  .avia-builder-el-last {
    padding: 40px 50px 50px 50px !important;
}
}

    3. It can be done of course but I would advice against it, on smaller screens the text and icons will cover each other and then you will need one or more fix for that depending on different screen sizes. Again, there’s a reason why responsive layouts are done like this, they work!

    Thanks,
    Rikard

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