troubles with landscape orientation on mobile

  • Resolved openview

    (@openviewsnc)


    5 years, 8 months ago

    Hi,
    before all let me thank you for this very useful plugin!

    I’m having troubles with my website as the images loaded on mobile are working almost fine just with smartphones in portrait orientation. On landscape the images are not filling all the width available… I tried to apply a “background-size:cover” CSS rule but with no success… (also the images on portrait are a little bit stretched, they are not resized proportionally).

    Can you help me please? How can I make the images take all the available space regardless of orientation and preserving their proportions?

    Thank you,
    Nicola

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hello Nicole,

    Try the below css code. Put this in your style.css file and call the classes in
    wherever you are using the parallax.

    This should stretch your image to full width and within the proportions.

    /* This is Parallax for the Mobile Devices */
    eg.
    #parallax{
    display:none;
    }

    .parallax-content {
    width:50%;
    margin:0 auto;
    color:#FFF;
    padding-top:50px;
    }

    .parallax-img{

    height: 40vh;
    max-height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    margin-right:-410px;*/
    width: 100vw;
    position: relative;
    margin-left: -50vw;
    margin-top:-5vh;
    margin-bottom:-5vh;

    left: 50%;

    }

    Wherever you are using your parallax use the below.
    <!–This is for all large devices–>
    <div id=”parallax”>
    [dd-parallax img=”IMAGE” height=”500″ speed=”5″ z-index=”1″ position=”center” offset=”true” mobile=”IMAGE”][/dd-parallax]
    </div>

    <!–This is the Mobile Device Parallax–>

    <div id=”parallax-container” class=”parallax-img” style=”background-image: url(“SAME IMAGE “);”>
    </div>

    Hope this helps.
    Cheers
    Aqib

    Thread Starter openview

    (@openviewsnc)

    Hi Aqib,
    this is a solution I was thinking about, thanks for putting it down for me.

    Cheers,
    Nicola

    I am glad it worked out for you. Cheers!

    Plugin Author thehowarde

    (@thehowarde)

    @spatwa110 thanks for helping out!

    Not a Problem. That was a fix i thought of however, i am sure you can also come up with something else better.

    Cheers!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘troubles with landscape orientation on mobile’ is closed to new replies.