Tagged: 

Viewing 23 posts - 1 through 23 (of 23 total)
  • Author
    Posts
  • April 24, 2017 at 6:36 pm #782473
    tremblayly

    Hi

    My website is here: http://crescendo.staging.wpengine.com/fr/ (hosted on WPengine)

    When I use two columns within a section, I make both columns equal height and aligned to the middle. One column has text, one an image. I duplicate the two columns just below so it looks like a square within that section.

    This does not display the same as I expected on mobile devices. How can I resolve this issue that is on all two pages: Coaching and Releve.

    Thanks
    Lyse

    April 25, 2017 at 7:19 am #782682
    John Torvik

    Hey tremblayly,

    Please, may you provide us some screenshots about your problem?

    Best regards,
    John Torvik

    April 25, 2017 at 2:59 pm #782905
    tremblayly

    Hi John,

    Here’s a screenshot: https://www.dropbox.com/s/6ys7jilxiivoop2/col%20issue%20on%20ipad.PNG?dl=0

    Thanks
    Lyse

    April 26, 2017 at 6:50 am #783259
    Rikard

    Hi Lyse,

    I get redirected to the page in private when I try to access the URL you attached in your first post, where can we see the problem?

    Best regards,
    Rikard

    April 26, 2017 at 4:07 pm #783569
    tremblayly

    Hi Rikard

    Sorry I had WPML issues with my pages yesterday. I fixed them all now so here’s the link to one of the pages that does not display well on mobile:

    Coaching

    So you are aware, instead of using columns not I changed these to use grid row because that helped with alignment of the images on the desktop. But I still have the display issue on the mobile.

    Thanks
    Lyse

    April 30, 2017 at 6:19 am #785189
    Ismael

    Hi,

    I can’t see the issue described in the screenshot. Is this fixed? If not, please try to move all elements or set of elements inside their own color section.

    Best regards,
    Ismael

    April 30, 2017 at 3:05 pm #785260
    tremblayly

    Hi Ismael,

    Here’s a screenshot of the issue I have on my coaching page for example on my iPad even when I use the grid row:
    https://www.dropbox.com/s/fx3s19wttjbqg9z/coaching%20page%20on%20iPad.PNG?dl=0

    Thanks
    Lyse

    April 30, 2017 at 3:07 pm #785262
    tremblayly

    ….and here’s the link to the coaching page: http://crescendo.staging.wpengine.com/coaching/#top (hosted on WPengine)

    ….and a link to the releve page: http://crescendo.staging.wpengine.com/releve/

    Lyse

    May 1, 2017 at 11:34 pm #786028
    Vinay

    Hi,

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    Login credentials include:

    • The URL to the login screen.
    • A valid username (with full administration capabilities).
    • As well as a password for that username.
    • permission to deactivate plugins if necessary.

    Best regards,
    Vinay

    May 2, 2017 at 3:47 am #786084
    tremblayly

    Hi Vinay

    My site is now in production (somewhat hidden until I get my mobile display issues sorted out). So the problem pages links are now:

    Coaching

    Relève

    Please find the login credentials below.

    Thanks
    Lyse

    May 2, 2017 at 7:45 am #786194
    John Torvik

    Hi,

    I apologize, but Ive tried to access your dashboard and the password isnt correct.

    Best regards,
    John Torvik

    May 2, 2017 at 2:43 pm #786384
    tremblayly

    Hi John,
    The credentials provided are correct. I resetted the password and successfully logged in. Please try again.
    Thanks
    Lyse

    May 3, 2017 at 4:19 am #786852
    Ismael

    Hi,

    Please remove the pencil image then apply it as the background of the cell. The image is responding correctly but you can see the white spaces because it has to retain its aspect ratio. Applying the image as cell background should force it to cover the cell container.

    Best regards,
    Ismael

    May 3, 2017 at 5:00 am #786869
    tremblayly

    Hi Ismael,

    It does not look right, parts of the pencils get cut off because of the size of the image is not exactly the same as the text block.

    My client just momentarily suggested to displays it like on the iphone. So I’m trying that out right now with the Releve page. I created two section ID and then modified the display for the mobile one. Then added the CSS to display different sections depending on the device. It seems to display like she wants it.

    I got that initial idea of show/hide from another one of your recommendation in another forum ticket.

    Thanks
    Lyse

    May 3, 2017 at 3:52 pm #787212
    tremblayly

    Hi Ismael,

    Just created desktop and mobile sections on both pages. All looks like I want so far except for when I flip the ipad horizontally. It does use the mobile version. What should I change in my CSS code that would force the landscape mode on my ipad to display like in portrait mode. I reduced my screen size from 1024px to 989px but it did not fix the issue.

    Here’s my code:
    /* alternate Releve entreprise grid for mobile devices */
    @media screen and (max-width: 989px) {
    #releve-entreprise-desktop { display: none !important; }
    #releve-entreprise-mobile { display: block !important; }
    }
    @media screen and (min-width: 989px) {
    #releve-entreprise-desktop { display: block !important; }
    #releve-entreprise-mobile { display: none !important; }
    }

    /* alternate Releve leaders grid for mobile devices */
    @media screen and (max-width: 989px) {
    #releve-leaders-desktop { display: none !important; }
    #releve-leaders-mobile { display: block !important; }
    }
    @media screen and (min-width: 989px) {
    #releve-leaders-desktop { display: block !important; }
    #releve-leaders-mobile { display: none !important; }
    }

    /* COACHING PAGE */
    /* alternate Coaching travail grid for mobile devices */
    @media screen and (max-width: 989px) {
    #coaching-travail-desktop { display: none !important; }
    #coaching-travail-mobile { display: block !important; }
    }
    @media screen and (min-width: 989px) {
    #coaching-travail-desktop { display: block !important; }
    #coaching-travail-mobile { display: none !important; }
    }

    /* alternate Coaching partenariat grid for mobile devices */
    @media screen and (max-width: 989px) {
    #coaching-partenariat-desktop { display: none !important; }
    #coaching-partenariat-mobile { display: block !important; }
    }
    @media screen and (min-width: 989px) {
    #coaching-partenariat-desktop { display: block !important; }
    #coaching-partenariat-mobile { display: none !important; }
    }

    Thanks
    Lyse

    May 4, 2017 at 3:10 am #787513
    tremblayly

    Hi Ismael,

    Any suggestions yet? My client is pushing to get this live end of day today, any chance of it happening?

    Thanks
    Lyse

    May 4, 2017 at 3:36 am #787519
    Ismael

    Hi,

    Please try to set the viewport or max-width value to 988px instead of 989px. And I’m not sure if this is a good idea because the layout will probably look different on specific screens (ex: retina displays). Another workaround is to set the background-size property of the cell background image to 100% so that whole image is visible inside the background positioning area but it might distort the image on certain screen sizes.

    .flex_cell {
    background-size: 100% 100% !important;
}

    Best regards,
    Ismael

    May 4, 2017 at 4:07 am #787532
    tremblayly

    Hi Ismael,

    I really appreciate your quick response. I tried modifying the max-width – no change. Then I tried your other suggestion and the results are not good. I don’t even see the pencils….

    I will go ahead and launch now because my client can live with this at this time without further delays.

    Again thank you so much for all of your efforts and patient!
    Lyse

    May 5, 2017 at 10:47 am #788298
    Ismael

    Hi,

    Congratulations for the launch! I’m sorry if we can’t be of much help this time. I think you have to compromise one aspect of the image because you can’t keep its aspect ratio without creating white space inside the cells. It’s possible but you have to create multiple versions of the thumbnail or image for different screen sizes.

    Best regards,
    Ismael

    May 5, 2017 at 5:08 pm #788524
    tremblayly

    Hi Ismael,

    I understand I can’t get the grid images to align. But how can I force these sections to display on the ipad landscape as if it were in portrait?

    Thanks
    Lyse

    May 6, 2017 at 12:26 pm #788797
    Ismael

    Hi,

    I think I see the issue now. The display property of the sections or grids are already set to “block”. You just need to hide them on certain screen sizes. For example, please look for this css modification:

    /* alternate Coaching travail grid for mobile devices */
@media screen and (max-width: 989px) {
	#coaching-travail-desktop { display: none !important; }
	#coaching-travail-mobile  { display: block !important; }
}
@media screen and (min-width: 989px) {
	#coaching-travail-desktop { display: block !important; }
	#coaching-travail-mobile  { display: none !important; }
}

    Replace it with:

    /* alternate Coaching travail grid for mobile devices */
@media screen and (min-width: 1025px) {
	#coaching-travail-mobile  { display: none; }
}

@media screen and (max-width: 1024px) {
	#coaching-travail-desktop { display: none; }
}

    Best regards,
    Ismael

    May 6, 2017 at 11:16 pm #788973
    tremblayly

    Hi Ismael,

    This works perfectly now and for both pages.

    Thank you so much
    Lyse

    May 8, 2017 at 5:54 am #789323
    John Torvik

    Hi,

    We glad that your problem was solved!

    Let us if you need some help :)

    Best regards,
    John Torvik

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