Slider images not resized for iphone6plus

Hi, Can someone please help with why the slider images do not resize on my iphone6plus screen? I matches the size to the original template in the Sydney Pro theme that I purchased. Everything's great so far but my slider images do not resize on the mobile. THANK YOU! I know this is not support but I can't find anything.

Tom

Hello there,

Thank you for reporting.

Could you please post your URL here so we can have a look?

Regards,
Kharis

Thought I did.
www.Jamminjunior.com

Thanks Kharisblank!

Hello there,

By default, the main slider background size property is set as cover. It scales the image as large as possible and maintains image aspect ratio (image doesn’t get squished). The image “covers” the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.

This situation doesn’t meet your objective. So you should write a couple of extra CSS codes. Try to add the following CSS code through the Simple Custom CSS plugin.

@media only screen and (max-width: 900px){
  #slideshow{
    height: 400px !important;
  }
}

@media only screen and (max-width: 600px){
  #slideshow{
    height: 210px !important;
  }

  .text-slider-section{
    top: 40%;
  }
  
}

#slideshow .slides-container .slide-item{
  background-position: top center;
  background-size: 100%;
}

Probably you should need to adjust the slideshow height on a specific mobile screen size which is defined in the media query.

I hope this reply helps.

Warmest regards,
Kharis

Thank you Kharis,
I have a Tj custom CSS plug in, can I use this one? Is it the same as the one you’re talking about, that SIMPLE CUSTOM CSS? Will this code resize it to fit my entire image for any phone? I did make my image the same size as the one that comes with the theme.
Thanks
Thomas

Hello there,

Yes, you can use the Tj Custom CSS plugin. It does the same functionality to insert CSS code in your site.

> Will this code resize it to fit my entire image for any phone?

I thought it should. I made the background size fits 100% to the screen width.

#slideshow .slides-container .slide-item{
  background-position: top center;
  background-size: 100%;
}

Let me know how it works for you.

Warmest regards,
Kharis

Is there any reason why my code

@media only screen and (max-device-width: 420px) {
.text-slider .maintitle {
font-size: 50%;

}

Wont resize the text for the Slider when viewed on iPhone etc?

http://shereparty.co.uk/?preview_id=2&preview_nonce=518061608c&preview=true

Hello there,

Try to apply the following:

@media only screen and (max-width: 420px) {
  .text-slider .maintitle {
    font-size: 50%;
  }
}

Let me know how it goes.

Regards,
Kharis

Hello,
I’m having the same problem and i’m working in the Sydney child theme.
I’m a beginner and don’t know css.
From the video of katrinah I know that you can add a code underneath the stylesheat.
The only thing I see now is.

/*
Theme Name: child-sydney
Version: 1.0
Description: A child theme of Sydney
Template: sydney
*/

@import url("…/sydney/style.css");

Can you tell mee what I can copy and paste to make my headerslider image responsive?
If you need additional info I can send you.
I’m dutch en hope I can understand everything.
Anita

The next problem I have is that in toolset I have to import te settings for custom type posts. But in the documentation I can’t find it anywhere.
Also below toolset there should be an option Getting started accordion to the video an I don’t have that.
Thanks Anita

Dear Anita,

Thank you for getting in touch here.

Copy the CSS code as seen here, then paste it after this line @import url(“…/sydney/style.css”);.

> The next problem I have is that in toolset I have to import te settings for custom type posts. But in the documentation I can’t find it anywhere.

I developed the Sydney Toolbox plugin that replaces it. What you need to do are just installing and activating this plugin.

Apologies for the confusion. Our documentation should have been updated.

Regards,
Kharis

Dear Kharis,

I am using the Maca theme (found here https://www.mojomarketplace.com/item/maca-wordpress-blog-theme) and I can’t figure out to align my header image properly. My site url is www.thedigibot.com

So that digi image in the top left corner needs to be resized and centered. For some reason it is also not aligning with the links to different pages on the right. I need those links to be in line with the image. I have tried everything and I’ve been unable to format it correctly? I would love your help!!! It’s been bugging me for a few days.

Thanks,
Avery

Hello, in response to this:

> Will this code resize it to fit my entire image for any phone?

I thought it should. I made the background size fits 100% to the screen width.

#slideshow .slides-container .slide-item{
background-position: top center;
background-size: 100%;
}
Let me know how it works for you.

Warmest regards,
Kharis

I could not get it to work. What I’d like is my slider images on my front page (suyaifightclub.com.ar) to always be shown 100% without getting cut off top/bottom/left/right.

Tried the codes mentioned on this post and didn’t notice any difference.

Any help would be highly appreciated!

Cheers!

Nico

Dear Nico,

Thank you for reaching out to us here. Try to set priority by adding !important declaration. The final code will look like this:


#slideshow .slides-container .slide-item{
  background-position: top center !important;
  background-size: 100% !important;
}

Let me know how it goes.

Regards,
Kharis

Thanks a lot Kharis, that worked!

Cheers!

Nico

No worries!

I was glad to have an opportunity to assist you. Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis

Hi again, Kharis!

I’m sory, but there’s something that’s still not OK about this topic.

When the header slider’s image scales down by making the windows smaller or opening from a smartphone, an undesired white space appears between the header slider and the first row on the front page (https://suyaifightclub.com.ar).

Is there a way to avoid that white space from appearing so there’s no gap between the slider and the 1st row?

Thanks in advance!

Nico

Somebody knows how to fix what’s posted above?

Hello there,

I would like to apologize in advance for the delay. I can’t access your site. It is displaying “404: Page Not Found”. Please fix it first.

Regards,
Kharis