Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • October 27, 2013 at 11:12 pm #181280
    jgoldberg1983

    Hi guys,

    I just made some changes to the layout of my site and some issues came up. Thanks in advance for the help!

    In the “About Us” section on the main page – there is a large gap in mobile view between the “Personal Service & Expertise” paragraph and the “High-End Custom Designs” paragraph. All I did was move these three small paragraphs from another colour section and this issue came up.

    What do you think caused it and how can I fix it?

    Many thanks,
    Jonathan

    October 28, 2013 at 12:05 am #181290
    Yigit

    Hi Jonathan!

    Please add following code to Quick CSS in Enfold theme options under Styling tab

    @media only screen and (max-width: 767px) { .avia-builder-el-29 { margin-bottom: -40px; }}

    Best regards,
    Yigit

    October 28, 2013 at 4:04 am #181371
    jgoldberg1983

    Didn’t work unfortunately. Also, any idea why this was caused? I didn’t have any problem with it before moving the 3 paragraphs to the new colour section.

    October 28, 2013 at 4:51 am #181379
    Josue

    Hi!

    In your css/custom.css, replace this line 269:

    div.flex_column:nth-child(6){
	height: 250px;
}

    With this:

    div.flex_column:nth-child(6){
	height: 170px;
}

    Cheers!
    Josue

    October 28, 2013 at 5:15 am #181383
    jgoldberg1983

    Thanks Josue, it wasn’t that one that was affected – I commented out the nth-child(6) under “@media only screen and (max-width: 480px)” and that made it look more in line but not perfect. The problem is that this code also affects the testimonials and removed the padding I had after the testimonials. How come this affects both locations? Shouldn’t it only affect one?

    Many thanks,
    Jonathan

    October 28, 2013 at 5:23 am #181391
    Josue

    Hey Jonathan!

    Make it exclusive to the About section using its ID:

    #about div.flex_column:nth-child(6){
	height: 170px;
}

    Regards,
    Josue

    October 28, 2013 at 5:49 am #181399
    jgoldberg1983

    Brilliant, thanks! How come child(6) affected two places though? Shouldn’t there only be one 6th instance in the page? Is it something wrong with my site?

    October 28, 2013 at 5:56 am #181402
    Josue

    Hi!

    Nothing wrong, thats normal CSS behavior, nth-child is relative to the parent, so that selector was affecting every sixth paragraph it encounters.

    Cheers!
    Josue

    October 28, 2013 at 6:08 am #181404
    jgoldberg1983

    Ok, thanks so much for the help.

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Gap in Mobile’ is closed to new replies.