WordPress.org

Ready to get started?Download WordPress

Forums

Customizr
[resolved] Keep the slider at the top of the page (17 posts)

  1. Startwebsiting
    Member
    Posted 6 months ago #

    Hello all,

    I came across an issue with my slider when I disabled the “Enable/disable slider's slides centering on any devices” feature. I am using the following code to attach the slider to the top of the page:

    @media (max-width: 1920px) and (min-width: 0px) {
    body .carousel-inner { top: 0px; }
    body .carousel { max-height: none; }
    }

    Before my slider was attached to the top but when I disabled that feature the slider started shifting a bit up and down when I am changing the resolution of the screen.

    Any idea how can I fix that? I would like my slider to be always located and the top of the page.

    Link to the site:
    http://www.startwebsiting.com/

    Thank you,

  2. ElectricFeet
    Member
    Posted 6 months ago #

    Looks good to me. Which browsers are you seeing this on?

  3. Startwebsiting
    Member
    Posted 6 months ago #

    Hi ElectricFeet,

    I use Firefox and Chrome for my tests. But really, the slider shifts a bit up and down on both of them when you are changing the screen resolution. I did test it by resizing the screen of the browser as well as by using http://quirktools.com/screenfly/. The same result.

    It used to stay always on the top with the “Enable/disable slider's slides centering on any devices” feature. But when I use this feature the slider jumps slightly up every time you open the homepage.

    Do you have any idea how I can fix one of these issues, so my slider will be always on the top without jumping slight up every time you open the website?

    Thank you,

  4. ElectricFeet
    Member
    Posted 6 months ago #

    Still don't see it in Firefox 31 for OS X. Which are you using?

  5. Startwebsiting
    Member
    Posted 6 months ago #

    Hi ElectricFeet,

    I use Firefox 31 as well.

    I made a pic with the issue I am observing with the slider. Please refer to the link below

    http://www.startwebsiting.com/sliderpic/

    The pic in the link shows the top of the slider in different resolutions. This test was done on Firefox 31.

    Let me know if you see the same ...

  6. ElectricFeet
    Member
    Posted 6 months ago #

    Ah, OK, see what you mean.

    Try this:

    /*make slider stick to navbar for all screen sizes*/
    .attachment-slider-full {
    vertical-align: top;
    }

    Not sure if it will work best with or without your CSS as well. Try both with and without.

  7. Startwebsiting
    Member
    Posted 6 months ago #

    Hi ElectricFeet,

    I tried your code but it did not work.

    I think I found what the cause for this issue is. I use the following code to adjust the slider height in different resolutions:

    @media (min-width: 1440px){
    #customizr-slider.carousel .item {
    height: 600px;
    min-height: 600px;
    line-height: 600px;
    }
    }
    @media (min-width: 1700px){
    #customizr-slider.carousel .item {
    height: 700px;
    min-height: 700px;
    line-height: 700px;
    }
    }

    When I remove the code above from my CSS, the slider is attached to the top even without any additional code. However, when I put the code in my CSS the slider starts shifting up and down and at 1440px and 1700px the gap between the slider and the bottom of the navbar is maximum.

    Do you have any idea how this can be resolved? I really want to keep the slider height different for different resolutions.

  8. ElectricFeet
    Member
    Posted 6 months ago #

    How about:

    #customizr-slider.carousel .item {
        vertical-align:top;
    }
  9. Startwebsiting
    Member
    Posted 5 months ago #

    It did not work :( I put it inside the @media and left it alone in the CSS file, but still the result is the same.

    I removed my CSS code, the one I posted in my first post, because it doesn't change anything ...

  10. ElectricFeet
    Member
    Posted 5 months ago #

    Oops. Sorry, did that in a rush and missed off img at the end. It should be:

    #customizr-slider.carousel .item img {
        vertical-align:top;
    }

    Leave the first suggestion in too.

  11. Startwebsiting
    Member
    Posted 5 months ago #

    @ElectricFeet, you are a magician. It works like a charm. Thank you very much.

    One more thing tho that I was not able to resolve on my own. Now the text which is above the featured pages (under the slider) is shifting a bit up and down.

    I am using the following code to display that text:

    add_filter('tc_fp_block_display', 'content_before_fp');
    function content_before_fp($html)
    {
    $before_fp = '<div style="text-align:center; font-size:24px; color:#000000;font-family:trebuchet ms">something something</div>';
    return $before_fp.$html; }

    Do you have any of your magic for this issue? I want to stick everything under the slider at the bottom of the slider.

    Thank you again!!!

  12. ElectricFeet
    Member
    Posted 5 months ago #

    Don't see any shifting here (Firefox / OS X).

    Other magic: Rather than use that filter hook, I would use an action hook in this case—the action hook that tc_fp_block_display is itself hooked on to—but with higher priority:

    //Add text before featured pages -- with priority 5, so appears before FPs
    add_action( '__before_main_container' , 'content_before_fp', 5 );
    function content_before_fp() {
        echo '<div class="pre-fp-text">something something</div>';
        return;
    }

    I also eliminated the inline styles, so you can style it with .pre-fp-text { ... } in CSS instead (is that space in your font acceptable without quotes?).

    Alternatively, if the text is going to change often, you can instead add a widget area there. That way, you won't have to fiddle with php every time (with the risk of bringing the site down with a missing ";"). Instead, you can simply use a text widget.

    To do that, take this snippet to add a widget after the header, but hook it to the __before_main_container with priority 5.

    As I say, I cannot see any shifting on your site; looks fine to me.

  13. Startwebsiting
    Member
    Posted 5 months ago #

    @ElectricFeet, thanks for getting back to me.

    The problem here is not only with the text under the slider but the whole container under the slider is shifting up and down. To verify this, I removed the text under the slider and the three featured pages were again shifting up and down when changing resolutions.

    I isolated the issue to the following code in my CSS:

    @media (min-width: 1440px){
    #customizr-slider.carousel .item {
    height: 600px;
    min-height: 600px;
    line-height: 600px;
    }
    body .carousel {
    margin-top: 0;
    padding-top: 0;
    max-height: none;
    }
    }

    I believe that the body .carousel class is the one that should be changed in order to stick the container under the slider at the bottom of the slider for all resolutions.

    Please let me know your thoughts on this. I really don’t want to lose your time any more with this issue.

  14. ElectricFeet
    Member
    Posted 5 months ago #

    Ah. See what you mean.

    Yes, they shift at the breakpoints. With the current Customizr design, it will never be smooth, because that's the way the carousel is designed.

    (I have to say that I'm not a great fan of the Bootstrap Carousel that Customizr uses. I've switched to flexslider, inside the metaslider plugin. But even then I get a tiny glitch as my navigation "dots" are loaded—see it on darioalfonsi.com .)

  15. ElectricFeet
    Member
    Posted 5 months ago #

    p.s. I should also add that users rarely see the shifting, as they rarely resize their browsers. It's web developers that mostly see this, as we continually play around with changing the browser window size.

  16. Startwebsiting
    Member
    Posted 5 months ago #

    @ElectricFeet, understood. You are right, it is not something that users will spot, but it was one of those things you notice and you want to get it fixed :)

    “Flexslider inside the metaslider plugin” will be something that I might consider later when I gain more experience in the web-development. Right now, I happy with what I achieved starting from 0.

    Regarding darioalfonsi.com, the slider resizes so smoothly and the website looks awesome. Good job there. Are you the developer?

    Thanks for your help and time getting this one to the bottom. I appreciate it.

  17. ElectricFeet
    Member
    Posted 5 months ago #

    Yes, I'm the developer. Thanks! :-)

    I started from 0 a year ago and learned a lot by using Customizr hooks etc. You're only a couple of months behind, by the looks of your posting history. Catching up fast :-)

Reply

You must log in to post.

About this Theme

About this Topic

Tags

No tags yet.