[Support request] Mobile view gets distorted

Home Forums Support [Support request] Mobile view gets distorted

Home Forums Support Mobile view gets distorted

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #326676
    Vida

    On the home page the three columns heights and the lower right hand corner “Stay in Touch” looks fine on the desktop view, but it’s distorted on the mobile view. Can you please take a look.
    Thank you.

    #326680
    Tom
    Lead Developer
    Lead Developer

    I’m not seeing any distortion on mobile?: https://www.screencast.com/t/mjTd7kzi

    All of the columns are stacked as they should be.

    #326681
    Vida

    Please look on the iPad

    #326685
    Leo
    Staff
    Customer Support

    Hi there,

    I see a lot of styles that’s causing the problem and making it not responsive.

    For example the min-height in .home-page-right-widget class and all the padding-left and padding-right with the p tag.

    Did you build this from scratch? I would recommend wrapping everything in div or span instead of using inline style so you can target them using media query:
    https://generatepress.com/forums/topic/how-do-i-search-for-my-previous-posts/#post-263744

    Let me know if this helps.

    #326686
    Tom
    Lead Developer
    Lead Developer

    This is what you mean by distorted?: https://www.screencast.com/t/fvxNivhj3r

    If not, can you show me a screenshot of what you’re seeing?

    #326698
    Vida

    Yes Tom, that’s what I mean by distorted. But “STAY IN TOUCH” corner is also distorted. As Leo said, it is built from scratch. I wasn’t sure how to align everything the way I wanted into one div.

    #326720
    Vida

    I am not able to do anything with columns height on the iPad view. But also the “STAY IN TOUCH”, the right corner footer widget also has issues. I tried to use inline css, but it doesn’t look correct on either mobile view. I also added media queries, but not sure if they are targeting.
    If you can take a look at I would greatly appreciate it.

    #326775
    Tom
    Lead Developer
    Lead Developer

    I’m not seeing “distortion”, but they are different heights. You just want to force them to be equal heights?

    If so, you could do this:

    .home-page-columns-style {
        height: 100%;
    }

    I’m not sure I’m seeing what’s wrong with the footer box – can you show me a screenshot?

    #327253
    Vida
    #327256
    Vida

    height:100%; – doesn’t seem to work either.
    The second image is the footer widget on the iPad.

    #327279
    Leo
    Staff
    Customer Support

    Sorry what is the Stay in Touch box supposed to look like on tablet? Can’t picture something that actually look good.

    #327284
    Tom
    Lead Developer
    Lead Developer

    For the footer widget, maybe use the grid system to create the two columns instead of your custom CSS:

    <div class="grid-50">
        Left side
    </div>
    <div class="grid-50">
        Right side
    </div>
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.