- This topic has 12 replies, 3 voices, and was last updated 5 years, 7 months ago by
.
-
Posts
-
I’m having trouble getting my images to show correctly on the Home page slider. I’m using 1200 X 600 images, but the tops are getting cut off. I’ve added the below Custom CSS, but it didn’t help. My site is: http://www.caninekarma.org/
#header-image {
max-height: 95px;
min-height: 20px;
overflow: hidden;
background-color: #fff;
}.has-banner-image#header-image {
min-height: 20px;
}#header-image img {
width: 100%;
vertical-align: middle;
}
#header-image.no-banner-image {
min-height: 300px;
max-height: 300px;
}Hello @dlnsparks,
The issue has arisen because the image is displayed as the background image.
However as a fix, please add below-given CSS by going to Admin Panel > Appearance > Customize > Additional CSS.
.slick-slide { height: 100vh; }Hope this helps.
Best Regards!!
What should the correct size of the slider images be? We feel like the slider is taking up too much of the front page real estate. Is there a way to minimize this?
Hello @dlnsparks
On inspecting your site URL, we found that the image size of the slider is fine and the space occupied seems to be normal.
However, if you are willing to use a small size image in the slider, use image with small height as the slider size will adjust in accordance to the size of the uploaded image itself.
Also, please once verify by using the image of 1421px x 560 px as the accurate size is 1421px x 560 px.
Hope this helps,
Let us know for any further query/consfuion,
Best Regards!!
We want the sliders to be the same height as the header image on the other pages. I’ve uploaded the same size image (1200 X 528), but I can’t get it to resize correctly.
Hello @dlnsparks.
Please upload the image of height approx 400 px which is equal to the height of the header images displayed in the single pages.
Hope this helps.
Let us know if that works or not?
Thank you.
I give up! I’ve uploaded the slider images as 800X400, but it doesn’t help! What am I doing wrong?
Here’s all of the code I have in CSS:
.home #features {
padding-bottom: 0;
}
.slick-slide .overlay {
opacity: 0 !important;
}
.slick-slide {
height: 80vh;
}
#client-testimonial .overlay {
opacity: 0.0 !important;
}
.home #our-services .entry-content p {
display: none;
}
.featured-image {
display: none;
}
.page-id-2123 div#page-site-header {
display: none;
}
@media only screen and (max-width: 767px){
#featured-slider {
display: none;
}
}I put the code in for
.slick-slide {
height: 80vh;
}
simply to try to reduce the height of the slider. But I just can’t get it to not take up so much real estate. Ugh!Hello @dlnsparks,
Once please try by adding below given CSS.
#featured-slider article { padding: 200px 0; background-position: 100%; height: auto; }Hope this helps.
Regards!!
My entire code is:
.home #features {
padding-bottom: 0;
}
.slick-slide .overlay {
opacity: 0 !important;
}
#featured-slider article {
padding: 200px 0;
background-position: 100%;
height: auto;
}
#client-testimonial .overlay {
opacity: 0.0 !important;
}
.home #our-services .entry-content p {
display: none;
}
#contact-us .overlay {
opacity: 0.2;
}
#contact-us .section-title {
color: #000;
font-weight: bold;
}
#contact-us .section-subtitle {
color: #000;
}
.contact-address ul.contact-details {
color: #000;
}
.contact-form {
background-color: #fff;
}
.featured-image {
display: none;
}
.page-id-2123 div#page-site-header {
display: none;
}
@media only screen and (max-width: 767px){
#featured-slider {
display: none;
}
}As you can see (http://www.caninekarma.org/) this definitely didn’t help.
What am I doing wrong?
May I chime in? I’m just another user of this theme and have struggled with this issue as well.
If I understand your problem it’s not the size of the slider window (which looks fine on your site) but what is show in the slider, particularly the tops (and bottoms) getting cut off.
I actually don’t think it’s an issue with CSS or with this theme but it’s a “feature” of responsive design. Think about it this way: You have a picture at a certain size that looks perfect (and the images on your site do, when I make the window small). Now you make your window wider. For the image to fill the width of the window AND maintain a given height AND NOT get distorted it has to cut off bottom and top pieces of the image. Otherwise you’d either have to allow the picture to grow in height or allow the image to get stretched out to the sides.
I don’t see how any CSS can “fix” this.
My “solution” to this: Make sure the images you use have their focus point centered and have plenty of stuff that can be cut off at the bottom and top. (See my site lrcgb.org).
Hello @fuchsr
Thank you so much for your help.
For any further query/confusion, feel free to write us back.
Best Regards!!
- You must be logged in to reply to this topic.
