I’ve figured out the logo and slider arrow responsiveness, but i still need help with reducing the arrow size and reducing the space between the slider and header on mobile device. Please note that the space is ok on PC. Thanks
Making all your slider images 1170 x 500 would help.
Following code removes the slider arrows altogether which might be an option for you:
/* Slider controls - hide all */
.carousel-control {
display: none;
}
You might also be able to change the size of .carousel-control – restricting the change to phone viewports by prefacing with @media (max-width: 480px) {
You should also switch off your CSS changes and then put them back one by one to note which mess up the design at small screen sizes. Customizr itself is very robust in its responsiveness, but some of the CSS that’s been added to the site has switched it off.
If you make a change to the CSS, you need to make sure that it works at all screen sizes before implementing. If not, then you need to use @media queries to change behaviour at different screen sizes. Have a read here to understand it better.
Thanks @electricfeet, i did that already, the problem is not responsiveness but it is that there is too much space between the slider and the header when viewed on a mobile device but everything is perfect on PC.
I just figured it out, @electricfeet your first suggestion helped. It seems like the slider doesn’t want to be mess with, i kinda reduced the slider height but as soon as i took out the code the site appeared well on mobile. But I’m not comfortable with the slider height/width its too large for my liking.
Yes, we’ve all learned that the slider is not to be messed with. It’s a Goldilocks solution: just right for most people. But there are always some daddy bears and mummy bears around 🙂
No easy solutions, except a lot of trial and error.
One approach is to define a media query that only kicks in on large screens and put your previous CSS in there.
@electricfeet Can you show me how to do that? if its possible to reduce the slider size just for PC’s it’ll be great, cos the slider doesn’t appear large on mobile.
@media (min-width: 1200px) {
/*Stop the slider growing crazily*/
#customizr-slider {
max-width: 1170px;
margin-left:auto;
margin-right:auto;
}
}
should do it.
I want to reduce the slider height not the width, I’m ok with the width i only have issues with the height and i need the code that will reduce the slider height on PC only, since its cool on mobile devices. Thanks
I have found that the only thing you can really do is play with the width. Because Customizr always maintains the aspect ratio and doesn’t crop the image, reducing the width to 1170px will limit the height to 500px. Any other approach will crop your image.
