We’re with you. JoomShaper is offering a 20% Discount on all plans due to the impact of COVID-19.

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Resize image and slideshow to be same height

Featured Lock Resolved Issue
Hi,
I apologize in advanced for asking a question about the Slideshow (Full Width). I have looked through a lot of the previously asked questions and I am unable to find the right solution.

My main goal is to reduce the height of the slideshow and the image as well. My image is 460 pixel in height. I want the slideshow and image to be same height. I have tried many CSS code and nothing seems to give me the result I want. I was able to change the height of the slideshow but the image gets cut off. Resizing the image to fit the slideshow is not an option for me. Thank you.

Please see my webpage at http://odonnellsjewelers.com/store1/.

8 Answers

Toufiq - Staff

More than a month ago #Permalink
Hi,

Thanks for your query. Please following the below instruction.

1. Find out the below css code from theme.less or template.css file

#sppb-slider-fullwidth .item {
padding: 300px 0 240px;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 0;
}


And replace with the below code

#sppb-slider-fullwidth .item {
padding: 120px 0 120px;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 0;
}


-Thanks

tts

More than a month ago #Permalink
That does not work. It simply cuts off the picture. I just need to make the picture zoom out. After I reduced the slideshow size, the image is very big and does not fit.

tts

More than a month ago #Permalink
Hi,

Thanks for your query. Please following the below instruction.

1. Find out the below css code from theme.less or template.css file

#sppb-slider-fullwidth .item {
padding: 300px 0 240px;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 0;
}


And replace with the below code

#sppb-slider-fullwidth .item {
padding: 120px 0 120px;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 0;
}


-Thanks


Please see my current website at: http://tts.services/qualitics123x/
Note how the image is cut off from the bottom. See my attached image of what it should look like. I need to force the images of the plane and the light bulb to fit the screen rather than getting cut off. Thanks.

Attachments (1)

  • Disruptive airplanes.jpg
    Disruptive airplanes.jpg 198 KB

Toufiq - Staff

More than a month ago #Permalink
Hi,

Thanks for your query. Please following the below instruction.

1. Find out the below css code from theme.less or template.css file

#sppb-slider-fullwidth .item {
padding: 300px 0 240px;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 0;
}


And replace with the below code

#sppb-slider-fullwidth .item {
padding: 120px 0 120px;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 0;
}


-Thanks


Please see my current website at: http://tts.services/qualitics123x/
Note how the image is cut off from the bottom. See my attached image of what it should look like. I need to force the images of the plane and the light bulb to fit the screen rather than getting cut off. Thanks.


Hi, Thanks for your reply. Please upload 1970X858px size image. Thanks

tts

More than a month ago #Permalink
Thanks for your response but that is not a solution to my issue. Its not a valid to expect all images to be that resolution. I have modified images with CSS with other templates and this should be a similar fix. So please let me know how I can use CSS code to fix the issue rather than trying to use images of an specific resolution. Thanks.

Toufiq - Staff

More than a month ago #Permalink
Hi,

Thanks for your reply.

Find out the below css code

.sppb-slideshow-fullwidth-item {
height: 855px;
}


And replace with this css

.sppb-slideshow-fullwidth-item {
height: 1142px;
}


-Thanks

tts

More than a month ago #Permalink
Hi,

Thanks for your reply.

Find out the below css code

.sppb-slideshow-fullwidth-item {
height: 855px;
}


And replace with this css

.sppb-slideshow-fullwidth-item {
height: 1142px;
}


-Thanks


Thank you for your response but I don't think you are understanding what I am trying to do here. I want to reduce the height of the slide show and also decrease the size of the image after the height is reduced for the slide show. I should not need to manually change the image height to accomplish this. I want to set the slideshow height to 855px, then i need the css code to modify the image to auto adjust to the slide show height. I hope that is clear. Thank you.

Toufiq - Staff

More than a month ago #Permalink
Hi,

Thanks for your reply. Please check the screenshot. Is it okay? Please let me know.

http://prntscr.com/e8hm3i

-Thanks


There are no replies made for this post yet.
Be one of the first to reply to this post!

124

Templates

331413

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us