Tagged: 

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 18, 2016 at 6:16 pm #634702
    hugaud

    Hi,
    I am having difficulty figuring out why the easy slider full width is cutting off the caption content / button on mobiles AND the image reduces to a very very thin format on this page of my website: http://e-ha.co.uk/stewkley/
    I have a 1500 x 630 image set to display at 1500 x 430 but i get the same problem if I display it as 1500 x 630

    What I don’t understand is how to achieve what is achieved the rivo software website below – also based on Enfold theme – where the caption resizes nicely and stays visible on mobiles whilst the slider image grows taller NOT thinner.
    From the inspector I can see they use a 1500 x 630 image.

    This is what I am trying to achieve on my slider in terms of image height behaviour on mobiles and having the caption and buttons display properly on mobiles: http://www.rivosoftware.com/

    Thanks in advance for you assistance
    Hugues

    May 19, 2016 at 4:17 pm #635290
    Andy

    Hey Hugues,

    try this code in Quick CSS field:

    @media only screen and (max-width: 767px) {
.avia-slideshow li img {
height: 200px;
width: 445px;
}}

    and adjust height and width as needed.

    Wordpress is cropping images by default when uploading them and if you want to control this behavior you can use a plugin like this: https://wordpress.org/plugins/simple-image-sizes
    I hope this will help :).

    Best regards,
    Andy

    May 20, 2016 at 11:52 am #635836
    hugaud

    Hay Andy,
    Thanks for the quick reply, always nice to learn new tricks with Enfold, I must say this is now my go to theme for pretty all client sites – loosing coiunt of how many licencses I’ve bought :-)

    The css works nicely for image height and I have adpated the dimensions as suggested but the images are getting deformed on mobiles. I’ve tried uploading a different image size at 1500 x 1124 but I get the same problem.

    @media only screen and (max-width: 767px) {
    .avia-slideshow li img {
    height: 300px;
    width: 800px;
    }}

    Is there anyway you can look at this website below and see how they’re achieving it without distorting the image please, I’d really appreicate that – it looks like, from the inspector, that they are serving up the same 1500 x 630 image on all devices but somehow managing to get the full width slider to change heigght whilst not distorting the image.

    http://www.rivosoftware.com/

    Thanks in advance
    Hugues

    May 23, 2016 at 2:21 pm #636782
    Andy

    Hi,

    you just need to find the right values for width and height inside of the code you mentioned. Play with different values and maybe you need to add a max-width value into it:
    @media only screen and (max-width: 767px) {

    .avia-slideshow li img {
height: 300px;
width: 800px;
max-width: 800px;
}}

    Adjust as needed.

    Gruß,
    Andy

    May 27, 2016 at 11:49 am #639227
    hugaud

    Andy, You are a total super-star !

    Adding max-width worked a treat, thank you

    I think the ability to control this type of behaviour would be great to have in the slider options if it can be added at some point ?

    Great theme, great support – just bought another 3 licences for clients :-)

    May 27, 2016 at 5:34 pm #639417
    Andy

    Hi,

    glad we could help. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Best regards,
    Andy

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Full width easy slider cutting off content & narrow image’ is closed to new replies.