Mobile Alignment

  • Resolved katielou

    (@katielou)


    8 years, 5 months ago

    Hi there,

    I was wondering if someone could help please. I am using the Divine theme and have used 3 featured pages side by side using the code from a previous topic (thank you)…and it worked perfectly on desktop. The iPad looks ok too. However the smartphone looks all wrong i.e. alignment. Does anyone know if there is a separate piece of code to use to make sure it looks ok on the phone? My website is https://www.pathtosuccesstrilogy.com.

    Thank you
    Kate ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Author Nick Diego

    (@ndiego)

    Morning Kate,

    It doesn’t look like you have added any mobile specific CSS to you site for the 3 featured pages. To do so, you need to make use of a media query. Something like the following should get you most of the way there.

    @media only screen and (max-width: 767px) {
    .home-triple-bottom .featured-content.featuredpage:first-child,
    .home-triple-bottom .featured-content.featuredpage {
        width: 100%;
        float: none;
    }
    .home-triple-bottom .featured-content.featuredpage .entry {
        width: 100%;
    }
}

    Let me know if this works, or if you have additional questions.

    Nick

    Thread Starter katielou

    (@katielou)

    Hi Nick

    Thank you so so much, it worked…looks much better ??

    I never would’ve figured that out so thank you!

    Kate

    Plugin Author Nick Diego

    (@ndiego)

    Great! I am glad it worked. Reviews are welcomed ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Mobile Alignment’ is closed to new replies.