Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • October 20, 2015 at 5:31 pm #521874
    essentialifecoaching

    Hey guys!

    My site is just about ready to roll out, but the mobile experience is a little wonky. I have a logo set to appear while pages are loading, but on mobile it is off center to the right.

    Also, the first element doesn’t stretch to fit the screen, even though the elements to the left and right have a css class assigned to them telling them not to appear in mobile view. I know this css code works, because it is causing other elements not to display on mobile, as intended.

    You can view the site here: http://www.essentialifecoaching.com/

    Can you help me resolve these two issues? Thanks!

    October 20, 2015 at 5:48 pm #521900
    Elliott

    Hey essentialifecoaching!

    I think I see what your talking about but I’m not sure what your wanting to do with it. Can you take a screenshot and highlight your intentions?

    Cheers!
    Elliott

    October 20, 2015 at 10:43 pm #522052
    essentialifecoaching

    Sure thing! The white gaps I’d like to eliminate in mobile are shown here and the off-center loading image is here.

    Thanks!

    October 21, 2015 at 8:54 am #522177
    Ismael

    Hi!

    Thank you for the info. Please add this in the Quick CSS field:

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all .container {
    width: 100%;
    max-width: 100%;
}
}

    Did you fix the second issue? I can’t see the button: http://imgur.com/v8jfyOQ

    Regards,
    Ismael

    October 21, 2015 at 8:05 pm #522481
    essentialifecoaching

    That definitely solves the full-width issue, thanks! But one thing I am noticing now is that the blog section’s image is beginning too low, leaving a gap between it and border of the section it should be in. It’s just a png set to appear in the upper left of the layout element (it’s supposed to look like it’s going out of the element it’s housed in).

    And the second issue wasn’t a button, it was the green icon overlaying the screen. It’s set through the Enfold options to show up as a loading screen image above the whirling circle below it, but it appears off center like that in mobile, but dead-center in desktop.

    Thanks!

    October 22, 2015 at 4:43 pm #523106
    Andy

    Hi!

    try to change preloader image with this code in Quick CSS field:

    @media only screen and (max-width: 767px) {
.av-siteloader-wrap {
left: -10px;
}}

    and adjust as needed.

    Cheers!
    Andy

    October 30, 2015 at 11:31 pm #527755
    essentialifecoaching

    Sorry for the long response time! Worked like a charm! Thanks!

    October 30, 2015 at 11:36 pm #527759
    essentialifecoaching

    Sorry, one last thing that didn’t get resolved from above. I’ve still got white sections above and below the first section of the website that I can’t for the life of me get rid of. I figured out that it was the background image of this section that was visible in these gaps, so I used some code I found elsewhere on these forums to remove the background image in mobile view, in the hopes that that would solve it, but now I’m just seeing white space. How can I tighten these vertical gaps up?

    Thanks!

    http://imgur.com/a/wFdyL

    November 2, 2015 at 7:29 am #528257
    Rikard

    Hi,

    Please try the following in Quick CSS under Enfold–>General Styling:

    #hp_bgr_1 .content{
    padding-top: 0px !important;
    padding-bottom: 0px !important;
}

    Thanks,
    Rikard

    November 2, 2015 at 9:13 pm #528797
    essentialifecoaching

    Thanks! That got rid of the white space at the top of the page, and while it reduced the white space below the affected element, it’s still there: .

    I’ve double checked that there’s no element there causing this issue.

    November 2, 2015 at 9:20 pm #528803
    essentialifecoaching

    I’m failing at posting links, let’s try again: http://imgur.com/W0w8q4J

    November 3, 2015 at 8:09 am #529028
    Ismael

    Hi!

    Add a negative top margin to the blog section:

    @media only screen and (max-width: 767px) {
#blog {
    margin-top: -20px;
}
}

    Best regards,
    Ismael

    November 3, 2015 at 4:29 pm #529420
    essentialifecoaching

    Thanks, that worked!

    November 4, 2015 at 8:19 am #529772
    Rikard

    Hi,

    Great, glad we could help :-)

    Best regards,
    Rikard

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