Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • July 19, 2015 at 1:17 pm #475372
    Archie

    Hi Admin

    Recently I created a topic here to request for assistance regarding the mobile layout of my website http://www.mycybergenie.com/

    The issue was the full width slider. There wasn’t enough space on the slider image to show the CTA button right below the subheading. Here’s what I mean.

    http://www.mycybergenie.com/wp-content/uploads/2015/07/Screenshot_2015-07-19-19-06-52.jpg

    And here’s how the full width slider would appear normally on a desktop/PC layout

    http://www.mycybergenie.com/wp-content/uploads/2015/07/2015-07-19_19-09-46.png

    One of your awesome admins sent me this CSS code to fix the issue.

    @media only screen and (max-device-width: 768px) {
    div#full_slider_1 {
    height: 150px;
    }
    .avia-slideshow.image_no_stretch li img {
    max-width: 160%;
    width: 160%;
    }

    It did fix the issue with the mobile layout but the problem now is the desktop/PC version of the website looks like this

    http://www.mycybergenie.com/wp-content/uploads/2015/07/2015-07-19_19-14-31.png

    Notice how it turned into a boxed layout instead of a full width layout? Can anyone help me fix the CSS code above so that it fixes the problem with the full width slider not showing the CTA button on a mobile layout, without messing up the layout for the desktop? I hope that made sense.

    Looking forward to your response. Thanks!

    July 20, 2015 at 1:06 pm #475756
    Ismael

    Hi hackoffseries!

    Thank you for using Enfold.

    The suggested code should not affect desktop screens because it is inside a media query unless there’s a missing bracket. Please post the css modifications on pastebin.com. Check the code above. There should be another bracket at the very bottom:

    @media only screen and (max-device-width: 768px) {
div#full_slider_1 {
height: 150px;
}
.avia-slideshow.image_no_stretch li img {
max-width: 160%;
width: 160%;
}}

    Best regards,
    Ismael

    July 21, 2015 at 5:34 am #476294
    Archie

    Hi Ismael

    Silly me! Thank you for pointing that out!

    There are still issues I need your help with though.

    I adjusted the settings to

    height: 250px; from original setting of height: 150px;

    max-width: 200%;
    width: 200%;

    from original setting of

    max-width: 160%;
    width: 160%;

    Right now the slider images are using an image with 2560 × 1600 resolution, but the ‘Slideshow Image and Video Size’ is set to ‘Featured 1500×430′

    What I noticed when I visit the mobile layout is that the space for the slider image is bigger, but the actual slider image itself stays the same. See screenshot below

    http://www.mycybergenie.com/wp-content/uploads/2015/07/Screenshot_2015-07-21-10-45-46.jpg

    I adjusted the ”Slideshow Image and Video Size’ settings to ‘Full 1500×1500’ and it did the trick on mobile. My question is, is it possible to make the slider image appear bigger on mobile layout but leaving the settings to ‘Featured 1500×430’ instead of the full 1500×1500?

    July 21, 2015 at 3:16 pm #476539
    Andy

    Hi!

    Wordpress is resizing the images by default. You can gain more control with a plugin like this: https://wordpress.org/plugins/simple-image-sizes/

    Hope this helps.

    Cheers!
    Andy

    March 24, 2016 at 3:27 am #602860
    Archie

    Thanks Andy! Kindly close this support ticket now.

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Problem with mobile layout of my site’ is closed to new replies.