Mobile Device Settings Help

resolved (17 posts) (2 voices)

  1. wpotomski
    Member

    When we change anything on the responsive & mobile settings, it makes the slideshow go wonky. I want to be able to add custom css to fix the social area and the slideshow text so that it's not a jumbled mess on devices.

    Attached screen caps: the first three show what happens to the slideshow if I do anything to the responsive & mobile settings. The other two are what I need to fix so that it's readable on devices.

    The website is http://redeuse.ca.

    EDIT: The first three attachments didn't upload. I will try those again.

    Attachments

    1. small-browser2.png (106 KB, 0 downloads) 2 years old
    2. small-browser1.png (97.4 KB, 1 downloads) 2 years old
    Posted 2 years ago #
  2. wpotomski
    Member

    Here are the messed-up slideshow screen caps that didn't upload before. On #1, only the text is wrong (moved to the top and gray).

    Attachments

    1. messed-up-slideshow3.jpg (15.5 KB, 0 downloads) 2 years old
    2. messed-up-slideshow2.jpg (13.4 KB, 0 downloads) 2 years old
    3. messed-up-slideshow1.jpg (10.8 KB, 0 downloads) 2 years old
    Posted 2 years ago #
  3. Elliott
    Support

    Hello wpotomski,

    Try adding this to your custom CSS.

    .flex-caption { font-size: 10px !important; }
    Posted 2 years ago #
  4. wpotomski
    Member

    Thank you but I'm not sure how that will help because we want the flex-caption to be large for desktop but smaller for devices.

    Also, it doesn't address why we can't change any of the responsive & mobile settings without it changing the structure of the slideshow on a desktop.

    Posted 2 years ago #
  5. Elliott
    Support

    You can use this to make it smaller on only mobile screens.

    @media only screen and (max-width: 767px) {
    .flex-caption { font-size: 10px !important; }
    }
    Posted 2 years ago #
  6. wpotomski
    Member

    That works like a charm! Thank you!

    What about the social media and phone number? You can see on the first screen cap above that it overlaps the logo for mobile devices.

    Posted 2 years ago #
  7. Elliott
    Support

    It doesn't look like there is much room there for it. Are you trying to move it up a bit?

    Posted 2 years ago #
  8. wpotomski
    Member

    Sorry for the delayed response. It can be moved up above the logo or down...whichever would make it work better.

    Posted 2 years ago #
  9. Elliott
    Support

    You can move them around with this CSS.

    #header_extras { top: 100px !important; right: 100px !important; }

    You can place it in the mobile CSS area in Dashboard > your theme > Responsive & Mobile > Mobile CSS.

    Posted 2 years ago #
  10. wpotomski
    Member

    I added that but it didn't change anything that I can see. Can the header extras be made to float above the logo?

    Posted 2 years ago #
  11. Elliott
    Support

    Paste the full CSS your using here. There may be a typo somewhere.

    Posted 2 years ago #
  12. wpotomski
    Member

    .flex-caption { font-size: 10px !important; }

    #header_extras { top: 100px !important; right: 100px !important; }

    Posted 2 years ago #
  13. wpotomski
    Member

    Do you need more than the css I pasted above?

    Posted 2 years ago #
  14. wpotomski
    Member

    Actually, I checked this out on some mobile devices and it doesn't look that bad.

    Posted 2 years ago #
  15. wpotomski
    Member

    But I still have the question of why when I change the mobile settings that the home page slideshow gets changed as shown above in the second set of screen caps.

    Posted 2 years ago #
  16. Elliott
    Support

    The default slider is not responsive so we switch it to a responsive slider on mobiles.

    Posted 2 years ago #
  17. wpotomski
    Member

    I see. Thank you.

    Posted 2 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