Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • May 26, 2017 at 5:17 am #799968
    clairemartindigital

    hi there,

    as you can see i am using media queries to adjust the padding between the rows on the homepage.

    for desktop the padding between the rows should be 50px.

    On mobile and tablet the padding should be 20px.

    I managed to get this to work on most rows.

    i am having some issues however getting this to work for the row highlighted in below screenshot. can you please help resolving this?

    View post on imgur.com

    many thanks

    May 26, 2017 at 2:30 pm #800150
    Victoria

    Hey clairemartindigital,

    You have added !important to .about-element somewhere and it’s giving you a hard time on mobile.

    View post on imgur.com

    Best regards,
    Victoria

    May 26, 2017 at 11:09 pm #800442
    clairemartindigital

    Hi Viktoria,

    there still seems to be an issue on the mobile of about 20px. See screenshot:

    View post on imgur.com

    May 27, 2017 at 4:44 pm #800553
    Victoria

    Hi clairemartindigital,

    Was about to check, but the page is not loading due to errors in minified and cached scripts. Can you disable cache for a little bit?
    Best regards,
    Victoria

    May 27, 2017 at 11:05 pm #800654
    clairemartindigital

    Hi there, it is loading fine on my end. Cleared my browsers cache before testing. Maybe clear your browser? Also, using Wp rocket so if you log in the site is not cached for you.

    May 28, 2017 at 5:34 am #800709
    John Torvik

    Hi,

    Ive checked your site and there isnt the padding-bottom: 0px in the .about-element. So, just add the following custom code inside your mobile media query:

    .about-element .content {
  padding-bottom: 0px !important;
}

    Best regards,
    John Torvik

    May 28, 2017 at 5:52 am #800721
    clairemartindigital

    Hi John,

    sorry but you are incorrect. I do have this css for the bottom padding of the about row (however it doesn’t seem to be working for whatever reason. The question is why???

    /****************** Padding – About row – top and bottom – mobile + tablet ******************/

    @media only screen and (max-width: 768px) {
    .about-element .content {
    padding-top: 0px!important;
    padding-bottom: 20px!important;
    }
    }

    /****************** Padding – About row – top and bottom – mobile + tablet ******************/
    /****************** Padding – About row – top and bottom – desktop ******************/

    .about-element .content {
    padding-top: 0px!important;
    padding-bottom: 50px;
    }

    /****************** Padding – About row – top and bottom – desktop ******************/

    May 28, 2017 at 6:16 am #800726
    clairemartindigital

    you can close this one. i eventually found a workaround.

    May 28, 2017 at 6:41 am #800732
    Sarah

    Hi,

    We’re glad you found a workaround!
    Do let us know here on the forum if you have any other questions.

    Thank you for using Enfold!
    Sarah

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘adjusting padding from mobile/tablet to desktop’ is closed to new replies.