Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • October 24, 2015 at 7:23 pm #524276
    LepsienArtFoundation

    Dear Support Team,

    I am afraid that I did some weird changes that now cause problems and I tried almost all codes I could find to fix the issues but obviously that’s not the solution so far.

    May I ask you to have a look at the back-end?

    My problems:

    1. On desktop: the page content and logo in the header do overlap. So I need to add additional whitespace to make it look right.
    2. On mobile: this unfortunately causes too much whitespace on the mobile version.

    I’m not sure if I did some wrong changes to the header options.
    >>> How can I balance the whitespace so that it looks more or less the same in both desktop and responsive version?

    3. On desktop: the logo is displayed centered which is the desired effect.
    4. On mobile: the logo is placed on the left and not shown as centered anymore.
    I found lots of threads around that topic but none of them solved the problem.
    >>> How can the logo be shown centered?

    Thank you very much for your help!
    The admin login data will be posted as private content.

    Best
    Sandra

    October 27, 2015 at 6:07 pm #525704
    Elliott

    Hey LepsienArtFoundation!

    1. I don’t see what your referring to on my end. Can you take a screenshot and highlight the changes your trying to do?

    2. Add this to your custom CSS.

    @media screen and (max-width: 767px) {
main { padding-top: 30px !important; }
}

    And play around with the 30px value to make it look like the desktop version.

    3. + 4. Add this to your custom CSS.

    @media screen and (max-width: 767px) {
.logo {
    width: 100% !important;
}
.logo a {
    width: auto !important;
    left: 50% !important;
    position: relative !important;
    transform: translateX(-50%);
}
}

    Cheers!
    Elliott

    October 29, 2015 at 12:32 pm #526703
    LepsienArtFoundation

    Hi Elliott,

    thank you for your effort!

    The first code worked pretty well, the logo is now centered on desktop and mobile view.

    But the second code unfortunately didn’t work. I try to explain the issue more precisely and will add screenshots.
    When creating the header and the content elements of the page I encounter the following problem: I have to use a grid row element and change the top padding to 150px otherwise header and content will get piled up and layered. See below:

    Defect header without container/ grid row element, now header and contend are layered:

    Only by using the grid row and adding 150 px to the top padding, I can solve this problem. See below:

    Correct Header with grid row element and padding top of 150px:

    Unfortunately, this leads to a lot of white space on the mobile version. I assume this comes from the 150px added to the top padding: See below

    Defect mobile view, there is too much whitespace between header and content.

    I wonder, if something went wrong in my general settings, because I have never had the problem of layered elements before. But all changes I tried had no effect.

    Do you see what I mean?

    Thank you very much,
    Sandra

    October 30, 2015 at 10:04 am #527271
    LepsienArtFoundation

    Dear Support Team,

    I have to add some more screenshots. Unfortunately I found that the logo is centered on some mobile devices and on some it is not.

    I have a HTC where it is centered, on iPhone it is not. Is there an option to adjust that?

    iPhone:

    HTC:

    November 1, 2015 at 4:59 pm #528133
    Elliott

    Hey!

    That’s because you had the header set to be transparent in the page layout settings.

    It looks like the reason your doing that is because your wanting the header to display “minimally” with no borders? If so then you can change that in Dashboard > Enfold > Header > Header Style.

    Cheers!
    Elliott

    November 2, 2015 at 3:24 pm #528530
    LepsienArtFoundation

    Dear Elliott,

    thank you very much for your help. But I still have some issues that I will summarize below and hopefully you can help me with that:

    1. Headerstyle/ Whitespaceproblem:
    Yes you are right, I’ve put the header to transparent to avoid borders. And now I understand that this causes the content to be pulled up.

    I set the general header settings to “minimal” as you proposed. But this alone did not change the situation.

    What helped to reduce the whitespace:
    The general settings: header style > minimal
    The settings for the page/post > no transparency

    On mobile it looks good!
    But the desktop view shows a border underneath the logo. This is what I wanted to avoid when using transparency option.
    How can I get rid of that line?

    2. Logo not centered on mobile devices
    Unfortunately the logo is positioned differently on different mobile devices. (see screenshots in post above)

    I managed to center it correctly with your code on HTC, but when you have a look at the site on an iphone the logo is not shown centered anymore.

    What can I do to let it appear centered on all (most of) mobile phones?

    Thank you very much again for your help,
    Sandra

    November 3, 2015 at 4:35 am #528964
    Ismael

    Hey!

    1.) Use this to remove the border:

    #header_main_alternate {
    border: 0;
}

    2.) You also have this code which breaks the suggested code above:

    @media only screen and (max-width: 767px)
@media screen and (max-width: 767px)
.logo a {
    width: auto !important;
    left: 30% !important;
    position: relative !important;
    transform: translateX(-50%);
}

    The media query is invalid. Please remove that.

    Best regards,
    Ismael

    November 3, 2015 at 4:23 pm #529412
    LepsienArtFoundation

    Hi Ismael,

    Thank you for that, and sorry I need more clarity around what exactly I have to remove from the Quick CSS. I could not found the exact code you’ve posted to be removed.

    I have this in my Quick CSS and I tried to remove the code in bold letters as I thought this might be what you’re referring to. But unfortunately nothing happened. I am no professional user and have to ask those silly questions:

    @media only screen and (max-device-width: 736px) {
    .flex_column.av_one_full.first.avia-builder-el-2.el_after_av_hr.avia-builder-el-last {
    margin-left: 22px !important;
    margin-right: -1000px !important;
    }}

    @media only screen and (max-width: 479px) {
    .responsive #socket .sub_menu_socket {
    display: block;
    }}

    @media only screen and (max-width: 767px) {
    .responsive .logo a {
    display: inline-block;
    vertical-align: middle;
    }

    @media screen and (max-width: 767px) {
    main { padding-top: 30px !important; }
    }

    @media screen and (max-width: 767px) {
    .logo {
    width: 100% !important;
    }
    .logo a {
    width: auto !important;
    left: 30% !important;
    position: relative !important;
    transform: translateX(-50%);
    }
    }

    #header_main_alternate {
    border: 0;
    }

    As I understand you that the changes to the code will 1. let the line disappear and 2. will center the logo on mobile?

    Thank you very much,
    Sandra

    November 4, 2015 at 2:47 pm #530037
    Andy

    Hi!

    this code you are using:

    @media only screen and (max-width: 767px) {
.responsive .logo a {
display: inline-block;
vertical-align: middle;
}

    is missing a bracket at the end and should be changed to this: 

    @media only screen and (max-width: 767px) {
.responsive .logo a {
display: inline-block;
vertical-align: middle;
}}

    You are using an old version of the theme by the way. Please upgrade and let us know when you are done and still need help.

    Cheers!
    Andy

    November 9, 2015 at 12:39 pm #532514
    LepsienArtFoundation

    Hi Andy,

    thank you for that clear instruction! It worked.

    But one questions remains unanswered: how can I center the logo on mobile devices?
    Unfortunately the logo is positioned differently on different mobile devices. (see my explanation and screenshots above).

    I managed to center it correctly on HTC, but when you have a look at the site on an iphone or samsung the logo is not shown centered anymore.

    What can I do to let it appear centered on all (most of) mobile phones?

    Thank you very much again for your help,
    Sandra

    November 10, 2015 at 4:05 am #533011
    Ismael

    Hi!

    Are you sure that you want to center align the logo on mobile? It’s going to be very near the mobile menu. Where do you want to place the mobile menu if you put the logo in the middle? Right now it looks like this:

    A screenshot of the header layout that you want on mobile will help. Try this:

    @media only screen and (max-width: 767px) {
.responsive .logo a {
    display: inline-block;
    left: 0 !important;
    transform: none;
}

.responsive #top .logo {
    text-align: center;
}
}

    Regards,
    Ismael

    November 10, 2015 at 2:20 pm #533237
    LepsienArtFoundation

    Hi Ismael,

    thank you so much, this finally helped!

    Now it looks like it should and its perfectly fine with the menu next to it.

    Thanks a lot,
    Best Sandra

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Desktop vs. mobile: logo centered / whitespace too much’ is closed to new replies.