WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
Logo, Slider arrow, featured pages and tagline not responsive. (11 posts)

  1. sukafia
    Member
    Posted 3 months ago #

    Permit me to thank the theme creator and contributors for putting together this wonderful theme, i must say its the best free WordPress theme and its far better than most premium themes.

    I'm having issues with my site logo, slider arrow, featured page option and tagline, they are not responsive. i viewed my site on a mobile device and they messed up the whole site. I'm using the latest version of the theme/wordpress. My site is http://www.xpresstechng.com

    And please if its possible to reduce the slider arrow, i would love to do that too. Thanks

  2. sukafia
    Member
    Posted 3 months ago #

    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

  3. chappie
    Member
    Posted 3 months ago #

    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) {

  4. ElectricFeet
    Member
    Posted 3 months ago #

    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.

  5. sukafia
    Member
    Posted 3 months ago #

    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.

  6. sukafia
    Member
    Posted 3 months ago #

    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.

  7. ElectricFeet
    Member
    Posted 3 months ago #

    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.

  8. sukafia
    Member
    Posted 3 months ago #

    @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.

  9. ElectricFeet
    Member
    Posted 3 months ago #

    @media (min-width: 1200px) {
        /*Stop the slider growing crazily*/
        #customizr-slider {
            max-width: 1170px;
            margin-left:auto;
            margin-right:auto;
            }
        }

    should do it.

  10. sukafia
    Member
    Posted 3 months ago #

    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

  11. ElectricFeet
    Member
    Posted 3 months ago #

    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.

Reply

You must log in to post.

About this Theme

About this Topic