Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • November 23, 2015 at 1:50 pm #540786
    condonpb

    I have a test site that we are developing at http://www.peter-test.co.uk. The issue I am having is trying to align the photos at the top of the following page so that they it is consistent across all devices when viewed. if you got http://www.peter-test.co.uk/?page_id=582 you will see that on a wide desktop the telephone box is not showing the top but on smaller devices it is. What is the best way to achieve a consistent look across all devices as I am struggling with this, so that the image is resized in order to get some consistancy. Can you offer some advice at tot he best way to approach this.

    Many thanks

    Pete

    November 24, 2015 at 7:27 am #541360
    Rikard

    Hi Pete,

    You might need to create a separate section for desktop and mobile and adapting the image to look good on each format. You can then show/hide the correct section using CSS like this: 

    @media only screen and (min-width: 768px) {
 #section-desktop {
display:block !important;
}
 #section-phone {
display:none !important;
}
}

@media only screen and (max-width: 767px) {
 #section-desktop {
display:none !important;
}
 #section-phone {
display:block !important;
}
}

    Regards,
    Rikard

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