Tagged: ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • October 2, 2015 at 7:48 pm #512993
    smorrone

    Hi guys my site http://www.brionesauto.com.ar/ is having an issue in mobile the logo an an image is text but image (briones) on the right overlaps in vertical view and looks odd in horizontal view.
    Is there a way to appears logo in top and the image below
    Like
    H Honda
    Briones

    here are some pics of what i mean

    http://tambali.com.ar/DSC_0499.JPG

    http://tambali.com.ar/DSC_0500.JPG

    http://tambali.com.ar/DSC_0501.JPG

    October 2, 2015 at 8:17 pm #513012
    Elliott

    Hi smorrone!

    Your logo has a lot of white space on the top of it. What you’ll want to do is center the logo within the image (make the whitespace even). Not sure what your trying to do with the “Briones” text. Are you wanting to hide it on mobiles? If so then add this to your custom CSS.

    @media screen and (max-width: 767px) {
.custom_content, .custom-content { display: none !important; }
}

    Best regards,
    Elliott

    October 2, 2015 at 8:23 pm #513015
    smorrone

    Hi thaks for the answer

    The thing is that “briones” is another image not text. I want “briones” below “honda” or something like that, Most important is no overlapping into each other.

    October 2, 2015 at 8:28 pm #513018
    Elliott

    Hi!

    In that case use this to move it around.

    @media screen and (max-width: 767px) {
.custom_content {
    position: absolute;
    left: 0px;
    top: 0px;
}
}

    Regards,
    Elliott

    October 2, 2015 at 8:33 pm #513020
    smorrone

    well that worked, but halfway, “briones” now is down but over the image slider
    any ideas?

    October 5, 2015 at 6:49 am #513492
    Ismael

    Hi!

    Try to adjust the code:

    @media only screen and (max-width: 767px) {
.responsive .logo a {
    top: -30px;
}

.responsive .logo {
    width: 200px;
}

.custom_content {
    position: absolute;
    left: 35px;
    top: 40px;
    width: 100px;
}
}

    It will position the custom content below the honda logo. Adjust the values if necessary. For smaller screens, use this css media query:

    @media only screen and (max-width: 480px) {
// STYLE HERE
}

    Best regards,
    Ismael

    October 5, 2015 at 2:50 pm #513831
    smorrone

    That worked fine!
    Thanks!

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Logo and image in header overlaping in mobile’ is closed to new replies.