Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • March 18, 2017 at 6:39 pm #762948
    jbanobi

    Hello,
    I am in the process of creating a website using the enfold theme, and just discovered that some pages look terrible when I view them on a mobile device. I’ve used padding quite frequently to create the appearance I want on the laptop, and this padding seems to carry over into the mobile layout, so that there are wide white spaces on the sides of the mobile screen, and only a few words per line. I see a similar problem with “whitespace/separators” which I have used to create spacing that looks nice on the laptop, but this spacing is just wasteful and looks bad on the mobile view. Can you suggest a solution to this problem?
    Also, I chose a 16px default font (because my eyes are old and don’t like small print!) but again this font seems to carry over onto the mobile layout, which is not ideal since not enough information can be seen at one time. There is a similar problem in places where I have chosen “header 2” or “header 3” styling for a line of text to draw attention. This looks nice on the laptop, but silly on the mobile because it is much too large. Can you please advise on how to avoid this kind of problem? Thank you.

    March 18, 2017 at 10:02 pm #762996
    Mike

    Hey jbanobi,
    If you have been adding your padding via css, then the easy solution is to add those rules to @media only statements, such as:

    @media only screen and (max-width: 767px) {
    css rules: here;
}

    425px is mobile & 767px is tablet

    Best regards,
    Mike

    March 18, 2017 at 10:21 pm #763000
    Basilis

    Hey jbanobi!

    Thank you for contacting us.
    Without been able to check your layout, what you need to do is go ahead and try use something like the following

    @media queries Responsiveness

    So, each of your spaces has a class, which you can use to either make the space smaller or disable them completely.
    It is based on media queries custom CSS that you have to write and use.

    Let us know if that is understandable

    Cheers!
    Basilis

    March 18, 2017 at 11:40 pm #763023
    jbanobi

    Hello Mike and Basilis,
    Thank you for your replies. I have not been adding the padding via CSS. I have primarily been adding padding via HTML using the text editor on the wordpress dashboard, e.g. <p style=”padding-left: 18px; text-align: left;”>TEXT HERE</p>, or using the Layout tab of the Edit Column screen in the Avia Layout Builder, where there are prompts to enter the desired padding. Can you explain how to correct the problem if I haven’t been using CSS to add the padding?

    March 19, 2017 at 6:29 am #763071
    John Torvik

    Hi,

    If you arent using a custom CSS code, youll need to create an exclusive class to apply a custom media query code at Enfold Theme Options > General Styling > Quick CSS.

    Follow a complete explication:

    If I create a tag with some styles value like this:
    text here

    I`ll need to apply a custom class on this tag, like this:
    text here

    Now, I`ll need to add a custom code to edit this padding just in the mobile:

    

@media only screen and (max-width: 767px) {
    .my-padding-p {
       padding-left: 0px;
    }
}

    let me know if it help you :)

    Best regards,
    John Torvik

    • This reply was modified 7 years, 3 months ago by John Torvik.
  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.