Header Slider image size

Hello, I am using the syndey theme with WP 4.7. The images on the front page are very large. They only show about 50% of the picture. I tried going into my media library and decreasing the image size, by scaling back about 60%, and reloading the smaller images into the slider, but it makes no difference in the appearance of the front page slider images. What can I do to fix this?
Thanks, Jim

Sorry, I forgot the url: www.heroesofthepast.com

Hello Jim,

Can you please try to use Full HD images under 1MB and see if it helps?

Kind Regards, Roman.

Roman, I am not sure I understand. These images are files that were copied from a facebook page and are all under 1MB. All of the originals are well over 1MB, and most in the 10MB range. I changed the images on the slider, and put in pictures that were downloaded to my computer from the camera. When viewed from outside of WP, the slider is still cutting off about 10%-15% off of the top and bottom of the image.
Jim

Hello Jim,

It looks like I understand what is your issue. Please check this topic:
https://wordpress.org/support/topic/screen-resolution-4/

Please let me know if you need more help.

Kind Regards, Roman.

Roman,

 Thanks for your reply.  I get it now.  Is there a way I can change

the css to “contain” instead of “cover”. I think that would work better
for me. I tried looking around but I cannot find the code that was in
the “smiley face” example.

 I have also done something to start a white bar coming across the

screen from right to left. Any idea what this is? I am willing to
delete the theme and reinstall, but before I go through that I thought I would ask.

Thanks, Jim

Hello Jim,

  1. Please try to use the following CSS code.

You can add CSS code in DashboardAppearanceCustomizeAdditional CSS (WordPress 4.7 and up). Also you can add CSS code directly to style.css file of your child theme.

div#slideshow div.slides-container > div.slide-item {
    background-size: contain;
}
  1. I’m not sure, what did you modify?

Kind Regards, Roman.

Roman,
When I installed Sydney, it was after hours of trying to make twenty seventeen work with a slider. Because I was frustrated, I forgot to make a child theme for Sydney. Since I was making these changes anyway, and since I thought it might get rid of the mysterious bar, I deleted syndey, reinstalled it and created a child theme. I then inserted the code that you supplied where I thought is should be. Below is my syndey child theme style.css

/*
Theme Name: sydney Child
Description: My magnificent child theme
Author: Jim Thornhill
Version: 1.0
Template: sydney
*/
@import url(’…/sydney/style.css’);

div#slideshow div.slides-container > div.slide-item {

background-size: contain;

}

The changes I made had no effect, so I think I must have done something wrong.
As far as the bar, it is still there. It started appearing when I was trying to modify the background color at appearance>customize>colors>header. I have no idea what specific step I took when the bar started appearing.
Thanks so much for your help. With out it, I would be screwed!
Jim

Hello Jim,

  1. Please try to add the CSS code that I provided above in DashboardAppearanceCustomizeAdditional CSS.

  2. Please try to add this CSS code as well in order to remove the white bar:

body p {
    background-color: transparent;
}

But please note that it’s a workaround, I’m not sure what caused it.

Kind Regards, Roman.

Roman,
Thanks for the code. I installed it, but it had no effect. This is what my Customizing CSS tab looks like:
/*
You can add your own CSS here.

body p {

background-color: transparent;

}
Click the help icon above to learn more.
*/
Any suggestions?
Jim

Jim, please try to remove this:

/*
You can add your own CSS here.

…and this:

*/

Please note, everything between / and / is considered comment in CSS.

Kind Regards, Roman.

Oohhh! I thought those tags were to tell WP what to do! Did I mention that I don’t know what I am doing?
The mysterious bar is gone. Thank you very much. Any more thoughts on why the “contain” is not working on the front page slider. Style.css of my child theme below: Thank you, Jim

/*
Theme Name: sydney Child
Description: My magnificent child theme
Author: Jim Thornhill
Version: 1.0
Template: sydney
*/
@import url(’…/sydney/style.css’);

div#slideshow div.slides-container > div.slide-item {

background-size: contain;

}

Roman, I was reading through some of my e-mails, and I saw the post where you suggested moving the code to contain the front page slider from my Style.css file to the additional CSS under Appearance. I did that and here is what it looks like now:

/*
You can add your own CSS here.

Click the help icon above to learn more.
*/
body p {

background-color: transparent;

}

div#slideshow div.slides-container > div.slide-item {

background-size: contain;

}
Unfortunately, this had no change. Did I do this correctly, and if so, do you have any more ideas?
Thanks, Jim

Hello Jim,

It looks like you have > instead of > in that CSS rule. Please try to correct or remove it.

Kind Regards, Roman.

Roman,
Thank you so much!!! That did it. I really appreciate all of your help.
Jim

You are welcome Jim! :slight_smile:

Kind Regards, Roman.