Okay
  Public Ticket #1429006
Mobile issues - photo boxes and buttons
Open

Comments

  •  2
    sparklesquad started the conversation

    Hi, 

    If you go to this URL: http://sparklingbeta.com/floravie, I'm having a few issues on mobile (iphone specifically).

    1. The button at the bottom "try Floravie CBD today" - the alignment is off. it cuts off the right side. I need it to fit within the mobile browser window with padding to match the left side

    2. The image boxes (Full plant extract, pesticide free etc...also "business, botany, belief") don't do anything in mobile. I know there is no "hover" but i was hoping that if you click on them in mobile, they would show the text (what you see in the desktop version if you hover). 

    Thank you for your help!

  •  2
    sparklesquad replied

    Oh, a few more things (in mobile only)...

    On this page: http://sparklingbeta.com/floravie/faq/

    3. The box with "history of hemp" has extra padding on the bottom in mobile, I can't figure out where this is coming from. 

    4. The timeline under "history of hemp"...all of the text is touching the left side of the screen; there's no padding. 

    Thank you!

  •  860
    Qode replied

    Hello,

    In the future please try to limit your questions to a maximum of 3 per ticket (you are free to create as many tickets as you want), because we need to be fair to other customers and answer to their tickets as well as soon as possible. Thanks for understanding

    1. Add this snippet to Qode options General>Custom Css:

    @media only screen and (max-width: 768px) {
      .qbutton.big_large, .qbutton.big_large_full_width {    
        padding: 0 5px !important;
      }
    }

    2. Add this one in Qode Options>General>Custom css:

    .touch .portfolio_slides .item.mHover .hover_feature_holder{
    display:block!important;
    }
    .portfolio_slides li.item.mHover .hover_feature_holder_inner{
    opacity:1;
    }
    .touch .portfolio_slides li.item.mHover .image_pixel_hover{
    background-color:rgba(21,21,21,0.78);
    display:block!important;
    }
    @media only screen and (max-width: 1000px) and (min-width: 600px) {
    .q_image_with_text_over .text:hover .desc {
    display: block;
    }
    }

    And this snippet to Qode Options>General>Custom JS:

    $j('.q_image_with_text_over .text, .portfolio_slides .item').bind('touchstart touchend',function(){$j(this).toggleClass('mHover');});

    3. Go to Qode Options>ParalLax and set lower value for parallax min height:

    https://www.screencast.com/t/Fvpv2mTs

    4. Add this snippet to Qode Options>General>Custom Css:

    @media only screen and (max-width: 768px) {
      .qode-workflow.qode-workflow-animate.qode-appeared {    
        padding: 0 10px !important;
      }
    }

    All the best,

    The new and improved Online Bridge Documentation is live. Check it out now - LINK

    Also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  •  2
    sparklesquad replied

    Thank you for getting back to me. I'm not sure why I can't ask all the questions that pertain to the same website, it's not very efficient for me or for you, but I'll note that for future issues. 

    Everything worked except the parallax. Please see attached.

    Attached files:  Screen Shot 2018-01-12 at 9.39.52 PM.png
      IMG_3051.PNG

  •  860
    Qode replied

    Hello,

    You can ask any question related to your website, but please try to limit your question to a maximum of 3 per ticket. Thanks for understanding. 

    Please try with this snippet in Qode Options>General>Custom Css:

    .touch .page-id-26 section.parallax_section_holder {
        min-height: 100px  !important;
    }

    All the best,

    The new and improved Online Bridge Documentation is live. Check it out now - LINK

    Also check our articles with useful tips and suggestions

    Best Regards,

    Qode

  •  2
    sparklesquad replied

    That worked, thank you!

  •  860
    Qode replied

    You're welcome. Thanks for using our theme.

    All the best,

    The new and improved Online Bridge Documentation is live. Check it out now - LINK

    Also check our articles with useful tips and suggestions

    Best Regards,

    Qode