Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • July 18, 2016 at 4:26 am #661844
    theplattrust

    Hi!
    The website that I am currently designing is having some issues when I use the mobile site.
    Using css code I have altered the icons of the email and cart icon to make them bigger on the website.
    However, when I use my phone to view the same website, the icons are displaced, appearing over the logo.
    Is there another set of css I can use to revert the icons back to their original size and position for just the mobile site?
    It is all affecting the phone number text, as that has also been altered in the CSS custom field.

    This is the css I have used to alter the size of the icons/text:
    .phone-info span {
    font-size: 30px;
    }

    #top .social_bookmarks li {
    width: 8px;
    height: 8px;
    }

    #top .social_bookmarks li a {
    width: 30px;
    line-height: 30px;
    min-height: 30px;
    font-size: 30px;
    }

    #header_meta .container {
    min-height: 8px;
    }
    .cart_dropdown_first .cart_dropdown_link {
    display: block;
    padding: 0 0 0 0;
    text-decoration: none;
    line-height: 43px;
    font-size: 30px;
    position: absolute;
    z-index: 10;
    width: 100%;
    height: 100%;
    }

    Screenshots
    Thanks.

    July 18, 2016 at 6:56 am #661867
    Vinay

    Hey Tim,

    Would you mind providing a precise link to your site, showing the elements in question? We need to be able to inspect them in order to help :)

    Best regards,
    Vinay

    July 18, 2016 at 7:03 am #661871
    theplattrust

    Thanks Vinay,
    The site in question is in the private reply
    The elements in question are the phone number, email icon and woo commerce cart icon in the top right of the page.
    Thanks,
    Tim

    July 20, 2016 at 3:07 pm #662986
    Andy

    Hi,

    use this code for mobile:

    @media only screen and (max-width: 767px) {
.phone-info {
position: relative;
top: -9px;
left: -62px;
}}

    and adjust as needed.

    Best regards,
    Andy

    July 25, 2016 at 4:50 am #664464
    theplattrust

    Thanks so much for that!
    I am trying to adjust the code so that the woo commerce cart icon is in the same row as the phone number and email icon. Adjusting the position values to bring it to the same height results in the cart icon partly disappearing behind a black rectangle/banner. It looks like the black rectangle is perhaps some sort of box for the phone/email, so is there a way to get the cart icon into that same area as well?

    Any help is appreciated.

    July 25, 2016 at 11:44 am #664557
    Andy

    Hi,

    add this code:

    @media only screen and (max-width: 767px) {
#header_meta {
z-index: 1;
}
a.cart_dropdown_link {
top: -75px;
}
}

    Best regards,
    Andy

    July 27, 2016 at 1:39 am #665550
    theplattrust

    That works perfectly!
    Thank you for all the help!

    July 27, 2016 at 2:15 pm #665750
    Andy

    Hi,

    glad we could help. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Best regards,
    Andy

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