Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • September 1, 2017 at 4:09 pm #846900
    tremblayly

    Hi

    My website here: https://www.herbalhealinginc.com blog posts do not display correctly on iphone devices.

    The titles overlap the content when viewing horizontally.
    Vertically, the content does not display correctly either.

    Where and what CSS elements do I need to change to make the content display correctly.

    Thanks
    Lyse

    September 2, 2017 at 10:51 am #847129
    Rikard

    Hey tremblayly,

    I checked your site on iphone6/chrome and I couldn’t see any obvious problems, could you post screenshots of the problems please?

    Best regards,
    Rikard

    September 2, 2017 at 3:35 pm #847191
    tremblayly

    Hi Rikard,

    Here are two links to two images (one portrait, one landscape on iPhone 6s using Safari)

    https://www.dropbox.com/s/u33afszcsyua0t0/IMG_0701.PNG?dl=0
    https://www.dropbox.com/s/trwa9vg9imae6cs/IMG_0702.PNG?dl=0

    Thanks
    Lyse

    September 4, 2017 at 9:55 pm #847912
    Basilis

    Hi,

    That depends basicly based of the sizes you have selected and the headline modifications.
    You can make that work only with some custom media queries

    media queries for common device breakpoints

    Best regards,
    Basilis

    September 5, 2017 at 12:21 am #847941
    tremblayly

    Hi Basilis,

    Thank you for the link. It very informative. After reading both of the articles that talk about responsiveness for the various media devices, I tried the suggested @ media CSS code. It did not help resolve my issue with the blog page display on my iphone.

    Thanks
    Lyse

    September 6, 2017 at 1:45 pm #848618
    Victoria

    Hi Lyse,

    I checked on the phone and in the browser emulator, things look in one column and stacking properly. Either the queries helped or it was a cache issue. Screenshot in private. If you’re not seeing the same, please attach some screenshots and post credentials in the private box below.

    Best regards,
    Victoria

    September 6, 2017 at 3:00 pm #848677
    tremblayly

    Hi Victoria

    It’s the blog post list that does not display correctly. From the main menu click blog and see the list of blogs, that’s where the issue is not on the website home page.

    Thanks
    Lyse

    September 7, 2017 at 10:14 am #848998
    Victoria

    Hi Lyse,

    It’s the styles added in Quick css that break things

    View post on imgur.com

    You need to put those styles in the media query to work just for desktop.

    Best regards,
    Victoria

    September 7, 2017 at 4:51 pm #849156
    tremblayly

    HI Victoria,

    Making the changes you suggested worked. But just for the desktop, is it possible to have the READ MORE display just below the text instead of below the image and text.

    Thanks
    Lyse

    September 9, 2017 at 2:49 pm #849944
    Mike

    Hi,
    Try this code in the General Styling > Quick CSS field:

    @media only screen and (min-width: 633px) and (max-width: 1439px) { .read-more-link {display: inline-block!important;}}

    2017-09-09_082512
    Please clear your cache :)

    Best regards,
    Mike

    September 9, 2017 at 7:08 pm #849988
    tremblayly

    Hi Mike

    I first tried adding the CSS code snippet into the styles.css in my child theme but it wouldn’t work. I added to the Quick CSS in the Enfold settings and all works as I want it now.

    Thank you so much for all of your help!
    Lyse

    September 10, 2017 at 8:10 am #850059
    Rikard

    Hi,

    Great, glad you got it working and thanks for the feedback. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.