Tagged: 

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • July 14, 2015 at 1:13 pm #473120
    jmorillo

    Helllo there:

    I’ve several responsive issues and some other minor stuff. I’ve concentrated all the elements in a ppt for easier explanation. It’ll be great if there is a common solution for the responsive problems (perhaps one breaking point – mobile is working better than tablet, but some important menus are missing).

    The file is in
    https://drive.google.com/file/d/0B1pkqICrGgvKbmJlWFdTZTl1bTQ/view?usp=sharing

    Please help

    Thanks in advance
    Jorge

    July 15, 2015 at 1:08 pm #473691
    Andy

    Hey jmorillo!

    1.) I can see the issue with menu overlapping menu on tablet landscape mode. Use this code to enable mobile menu instead:

    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
nav.main_menu {
display: none;
}
a#advanced_menu_toggle {
display: block;
}}

    2.) Text is cut: I suggest to make font size a little bit smaller: 

    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.av-special-heading.av-special-heading-h1.blockquote.modern-quote.modern-centered.avia-builder-el-2.el_before_av_button.avia-builder-el-first.av-thin-font.av-inherit-size {
font-size: 49px !important;
}}

    3.) Add background-color to the code from 2.):

    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
.av-special-heading.av-special-heading-h1.blockquote.modern-quote.modern-centered.avia-builder-el-2.el_before_av_button.avia-builder-el-first.av-thin-font.av-inherit-size {
background-color: red;
}}

    Adjust as needed.

    4.) Rebajado button:

    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
span.onsale {
position: relative;
}}

    5.) Price is cut:

    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
#top .price, #top .price span, #top del, #top ins {
font-size: 9px;
}}

    That is already quite a lot of customization, which needed a lot of time. Normally we would ask you to open separate ticket for each task/code/issue, so others from our team can answer simultaneously and you would get a faster reply.

    Best regards,
    Andy

    July 16, 2015 at 11:59 am #474191
    jmorillo

    Hello Andy:

    I’ve added the code in the quick css box and resize the screen in the computer. No one is working. Sorry I can’t see any difference. I haven’t take screens because it remains the same as in the powerpoint. Please help!

    Taking your suggestion about quantity
    I`m going to open tickets in groups of 2 for the remaining

    Thanks
    Jorge

    July 17, 2015 at 2:13 am #474647
    Ismael

    Hi!

    Please remove browser cache or hard refresh the page before testing. Maybe, you’re looking on a cached version of the site. I’m not sure why Andy can access the screenshots but when I checked it, it’s all blank.

    Regards,
    Ismael

    July 17, 2015 at 4:18 am #474671
    jmorillo

    Hello,

    I tried that and try in chrome hidden mode. I don’t see any change.

    https://drive.google.com/folderview?id=0B1pkqICrGgvKflRwckk2ZnR1b29VNEVQbVYwNUlYTlRBUXg2ZlkyLUJqWGN6SmxJRlZXYTg&usp=sharing

    pictures 4-9

    Please help.

    Thanks

    July 17, 2015 at 7:41 am #474696
    Basilis

    Hey!

    Please do provide us backend access, so we can see how we can fix the issues.
    Andys code is correct, so we need to investigate it online

    Regards,
    Basilis

    July 17, 2015 at 11:16 am #474796
    jmorillo

    Hello,

    Thank you. I’m attaching credentials for back and ftp.

    Best regards

    Jorge

    July 20, 2015 at 2:00 pm #475801
    Andy

    Hi!

    for 1.) try to replace or add this code as well: 

    @media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
nav.main_menu {
display: none;
}
a#advanced_menu_toggle {
display: block;
}}

    and let us know if this will show mobile menu on iPad landscape mode.

    2.) Your text got looking better to me now:

    So I can definitely see some of the changes. Can you try on another computer as well to double check please?

    Best regards,
    Andy

    July 21, 2015 at 1:24 pm #476461
    jmorillo

    Hello:

    I have been making more testing. In general it’s not working:

    1. For the menu no changes. It’s not working your last code was the same as the first one. I need a solution working fast so I switch to logo center on top, it remains with problems in ipad, one element is moved (pictures with ipad menu in the name)
    2.For the text (headings) it’s working for desktop but only in the first color section no in the others sections of the page. Easy seen in http://acolsa.staging.wpengine.com/colchonetas/ (hosted on WPengine) if you start changing the resolution
    3. The text is cut in ipad (for headings) – picture below
    4.For the text in blue below products I haven’t get and answer yet – picture below

    You can see the pictures here

    https://drive.google.com/folderview?id=0B1pkqICrGgvKflM2OS1BLXlQaHpVdGZlY05rWkZhNmtCRXBnT1RBaEpLaG10bjJkUXIwa0E&usp=sharing

    The file names are self explanatory for the issues.

    Please help
    Thanks and regards

    Jorge

    July 31, 2015 at 4:07 pm #481428
    Elliott

    Hi!

    Add this to your custom CSS.

    .inner_product { overflow: visible !important; }

    The rest of the issues look fine to me, did you get them sorted? If your still having problems then send us a link to the exact page and take a new screenshot and highlight how your wanting to change it.

    Cheers!
    Elliott

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