Slider image fit on mobile view

  • Resolved wpdenny

    (@wpdenny)


    3 years, 6 months ago

    Dear SpicePress Support,

    is it possible to configure the fit of the slider image, espacially on mobile view?
    I already checked the post about how to set the slider heigth manually (using custom css) but that doesn’t solve the issue.

    I want my slider image to be shown in total when on mobile view, i.e. fit to the page’s width. With the standard configuration the slider images gets streched ove the width of the page and only the middle 20% of the image are shown. That doesn’t look good.
    Are there any custom css phrases that I can try?

    Thanks in advance!

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

  • HI @wpdenny
    Thanks for contacting to us.
    If possible share your website url, So that we can take look and assist you better.

    Thanks
    SpiceThemes Support

    Thread Starter wpdenny

    (@wpdenny)

    Thanks, unfortunatly my side isn’t public yet. I’d love to fix the issue before going online (it’s under maintenance).

    To me it does not seem to be a website-specific problem but a more a general issue.
    If there’s no other way I will go public anyway and then I’m able to share the website.

    Thanks for your fast reply!

    Hi
    To fix the image size issue in mobile devices.
    Add the below css code inside the additional css box. 

    @media only screen and (min-width: 767px) 
{
section.slider .item 
{
    background-size: 100% 100% ! important;
    height: 40vh ! important;
}
.slider .format-standard 
{
    width: 100%;
}

.slide-text-bg1 h1 
{
    font-size: 15px
}
.slide-text-bg1 p
{
    font-size: 11px;
}
}

    Change font size value as your need.
    Thanks

    Thread Starter wpdenny

    (@wpdenny)

    Dear @akhileshnagar
    thank you very much for your help! The code does exactly what I was looking for!

    But I had to change min-width to max-width to apply the changes only on mobile view.
    And by varying height: 40vh between 30vh an 25vh the image doesn’t get squeezed in portrait view.

    Thank you again!

    Hi
    For this add the below css code inside the additional css box.
    Change height value as your need.

    @media only screen and (max-width: 480px) and (min-width: 200px) { 
{
section.slider .item 
{
    background-size: 100% 100% ! important;
    height: 40vh ! important;
}
}

    Thanks
    Akhilesh

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Slider image fit on mobile view’ is closed to new replies.