2 issues with iphone mobile view on Dejavu site

resolved (5 posts) (2 voices)

  1. CFarone
    Member

    Hi, Elliott...

    For reference the site I am working on is http://www.robynlreynolds.com.

    I have 3 issues with the mobile view on iphone that I need help with.

    1. Tagline: On mobile view the tagline becomes 2 lines, which is fine. However, the line spacing is too tight. What code do I use to add more line spacing in the mobile view only?

    2. The social media icons appear on top of the tagline. They need to be underneath the tagline and centered.

    3. I do not like how the slider looks in mobile view. The words appear over top of the photo and it is hard to read. Also, the "call to action" button is not showing and if I tap on the slide it does not take me to the page it is suppose to go to. Is there a way to make custom slides just for mobile view? Or not have the slides at all, just text boxes (which is actually preferred).

    Thank you for your assistance.
    CFarone

    Posted 3 years ago #
  2. Elliott
    Support

    Hello CFarone,

    1. You can add extra CSS in Dashboard -> your theme -> Responsive & Mobile -> Mobile CSS to make changes only on the responsive view.

    2. Add this to your mobile CSS,

    #header_extras {
        margin-top: 0px !important;
    }

    3. You can remove the flex slider in Dashboard -> your theme -> Responsive & Mobile and add some custom content instead.

    Posted 3 years ago #
  3. CFarone
    Member

    Dear Elliott...

    Thank you for your response. I do need help with:

    1. The exact CSS code to increase the line spacing on the TAGLINE in the Mobile view. I have made several attempts and nothing is working.

    2. I added the CSS code you provided and the "header extras" did move...however now they appear over the site/logo name. I need them to be centered UNDER the tagline (preferred) or centered a the top ABOVE the site/logo name.

    Thank you.
    CFarone

    For reference the site I am working on is http://www.robynlreynolds.com

    Posted 3 years ago #
  4. Elliott
    Support

    1. Are you talking about letter spacing or line height here? To do those it would look like this on your p element,

    letter-spacing: 1px;
    line-height: 20px;

    2. Add this,

    .mysite_responsive #header_extras { position: absolute !important; top: 0px !important; right: 0px !important; }

    And then play around with the values.

    Posted 3 years ago #
  5. CFarone
    Member

    Thank you so much, Elliott! You are the best!
    CFarone

    Posted 3 years ago #

Reply

You must log in to post.

Construct WordPress Theme
Construct wordpress theme
Myriad WordPress Theme
Myriad wordpress theme
Method WordPress Theme
Method wordpress theme
Fusion WordPress Theme
Fusion wordpress theme
Elegance WordPress Theme
Elegance wordpress theme
Echelon WordPress Theme
Echelon wordpress theme
Dejavu WordPress Theme
Dejavu wordpress theme
Modular WordPress Theme
Modular wordpress theme