Genesis Responsive Slider Off Center

Homepage Community Forums Optimal Theme Support Genesis Responsive Slider Off Center

Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #6571
    tamjl
    Customer

      Hi –

      I’m a long-term Genesis/StudioPress user who just purchased the Optimal theme. I loaded it on a fresh site install, with fresh Genesis install, all latest versions of both Genesis and Optimal. I created a test image 960×350 and loaded it. As you can see here, it is not centering:

      Sandbox Site

      I have touched no code yet, the slider display settings are set to 960×350, Optimal is the only theme this freshly installed site has known (other than its companion, Genesis). There are no other images loaded and so no need to run the Regenerate Thumbnails plugin. There are also no other plugins added beyond what defaults with the install, and no other widgets added or changed. I’ve checked it in Chrome, Firefox and Safari and the off-centering problem displays in all three.

      I figured it should work out of the box so I haven’t gone scouting in the code to find the problem. Can you discern what’s up? Thanks!

      #6574
      Eric
      Customer

        The theme is 1140px wide, not 960px. So if you adjust your settings to 1140px width then the slider will fill up the entire space of the container it’s in.

        Also, the Genesis Responsive Slider images don’t center, they float left or right, but they don’t center. This isn’t caused by the theme or anything, that’s just the way the plugin itself is designed. You can change the width to 1140px to fill in the entire space which will make it appear as centered.

        You should also download and run a plugin called Regenerate Thumbnails anytime you change or add your image sizes. This will adjust everything instantly for you so you don’t have to wait for the images to resize.


        I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

        #6579
        tamjl
        Customer

          Hi, Eric –

          Thanks for the prompt reply. I’m confused by your advice…the demo of Optimal on the appfinite site features slider images that are 960×350. And the appfinite tutorial references the same dimensions.

          So which setting are you saying I should change to 1140? If you mean the slider display settings, that didn’t work, just moved the slider even further to the left. A larger image also made no difference and caused Optimal’s default bottom shadow (beneath the slider image) to be blocked. Not sure what other setting should be changed as part of the Optimal default install.

          I understand floats and centering and the Genesis Responsive Slider (which I’ve used successfully with StudioPress themes and my own custom themes). The point I’m trying to make is that the slider image on the home page of Optimal “appears” centered…and on my install I can’t get it to line up properly with the shadow image set to show up beneath it (default install image provided by appfinite).

          #6583
          Eric
          Customer

            Ahhh yes, the tutorials are based on the 960px wide version (the old version). The theme demo is still the old version as well…Wes should be updating all of that soon, I’ll send him a reminder for the tutorial update just in case. I know for a fact he’ll be updating the demo with the newer version of the theme that you have now.

            For the slider settings, you’ll see something that says – Maximum Slider Width (in pixels) that’s where you can add 1140. Then use the Regenerate Thumbnails plugin to adjust your images.

            Also make sure your image is large enough to fit an 1140px width, because I’ve noticed that small narrow images don’t scale very well….(WordPress is actually responsible for scaling the images BTW.)

            Another thing I noticed is that the pagination (the little circles at the bottom) and the shadow will only show if you have more than one image. So I’d actually add 2 images to your slider and that should fix your issue (hopefully). If you only plan to use 1 image, then you definitely don’t need a slider to show it. So I guess my question is, how many images are you planning to use?


            I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

            #6637
            tamjl
            Customer

              As I’ve said, I’m quite familiar with the genesis responsive slider and how it works, as well as familiar with the regenerate thumbnails plugin. The test site I shared was only to show you how the slider was off center with the image sizes provided in the instructions, so nothing else there needs attention other than the slider offset issue.

              We’re almost there with the slider. The new 1140 size did make the difference on the centering, but the 350 height still hides the “shadow” image that should align with the bottom edge of the slider image. Is the height of the slider also intended to be different now?

              Thanks.

              #6641
              Eric
              Customer

                I’m guessing you missed my previous comment. I’ll copy/paste it below just in case –

                “the pagination (the little circles at the bottom) and the shadow will only show if you have more than one image. So I’d actually add 2 images to your slider and that should fix your issue (hopefully). If you only plan to use 1 image, then you definitely don’t need a slider to show it.”

                If you’re only planning on using 1 image, then you shouldn’t use a slider, it’s like “killing an ant with a sledge hammer”. Just add the image itself in a text widget instead of a slider. A slider will add to your site load times and is unnecessary if you only have 1 image. If you plan to have more than 1 images then everything should work fine.

                Try that first so I can see what happens with your code.


                I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

                #6651
                tamjl
                Customer

                  No, Eric, I didn’t miss that. I have been reading your responses in detail. But it didn’t appear to address the question I’m asking.

                  Please understand that I am not asking about Genesis Responsive Slider functionality. As I’ve said, I’m very familiar with the slider and its features, including the little navigation circles beneath it. I’ve customized most features of the plugin’s functionality many times in the past.

                  I am asking about Appfinite functionality — the Appfinite shadow image that comes with the Optimal theme. It is hidden behind the 350px high image, thus leading me to ask if the image height requirements have also changed with the latest Optimal release (since the width changed, it occurred to me that perhaps the height changed as well).

                  Are you saying that Optimal has set the theme up so that the shadow image only appears when there is more than one slide? I only set up one slide in my demo for you because I don’t want to spend a lot of time with this theme until out-of-the-box functionality is fully working…I am aware that there are better ways to show a single static image than a slider plugin and would, of course, only use the slider if I plan to use multiple images.

                  #6655
                  scooby
                  Customer

                    I was wondering the same thing, until I realized I only had one image in the slider. Thanks for clearing that up Eric.

                    #6660
                    Eric
                    Customer

                      @tamjl –

                      “Are you saying that Optimal has set the theme up so that the shadow image only appears when there is more than one slide?”

                      Yes and No. The Optimal theme does not control the slider functionality. The way the circles show up is based on the Genesis Slider itself, this has nothing to do with the theme. It will function this way in any theme. The only thing the Optimal theme does is add a shadow image at the bottom when using more than 1 image. That’s it.

                      I know I keep repeating it, but again, you have to add at least 2 images to see that the circles and the SHADOW appear. Your height or anything else doesn’t matter. Of course I didn’t design the theme, but I can see that nothing has changed from before. You would simply add a couple images and the shadow shows up at the bottom. I have a site using this exact theme/version and it’s working fine.

                      You don’t have to add a bunch of images, just add 1 image to test it (which I thought you would have already done by now) and you’ll see it show up. Actually, you don’t even have to create a page and add a featured image, etc….if you just want to test it, then you can just add another ID in the slider settings and the shadow will still show up whether the page has an image or not.

                      So to clear everything up, No there are no issues with the theme, everything is working fine. Just make sure to use at least 2 images or more since this is a slider. I’m posting this for anyone else that may be confused on how to set this up.

                      Let me know if you have any other questions.


                      @Scooby
                      you’re welcome!


                      I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

                      #7160
                      ViolinSugar
                      Customer

                        I have the same problem as tamjl… SAME PROBLEM… and please, would you help? The shadow (which is off center and behind my image) shows when I have two images. I want two or more images. I want the shadow fixed. Am I being clear?

                        #7161
                        ViolinSugar
                        Customer

                          Here is an image of what happens on my website:

                          http://www.suzukimusiclessons.com/wp-content/uploads/2013/09/responsive-slider-shadow-offset.jpg

                          I hope it is clear to see what we mean.
                          Thanks!

                          #7185
                          Eric
                          Customer

                            @violinsugar Please take a look at any of my comments above, the solution is the exact same for everyone. After you read my comments and try it out everything will work fine. Make sure your slider is set to 1140px and your images are 1140px if you plan on using an 1140px theme


                            I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

                            #7193
                            ViolinSugar
                            Customer

                              @Eric,

                              I did try it with an image that is 1140x400px. The slide was still off center and the shadow showed like the image I posted earlier, as well. Yes, I went to the slider settings and entered the measurements of the image. No success.

                              I would like to know how the demo got to look so good. Maybe I can get the demo content and reverse engineer it. I can’t seem to make the optimal theme look any way near the demo.

                              Thanks, anyway.

                              #7194
                              Eric
                              Customer

                                How many images do you have in the slider?


                                I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

                                #7204
                                ViolinSugar
                                Customer

                                  @Eric, I have two 1140x400px images… Off center and shadow hanging behind to the side when the browser window is wide.

                                  #7210
                                  Eric
                                  Customer

                                    Do you have a link so I can take a look at whats going on?


                                    I create awesome sites for awesome people! Contact me if interested – ericsanchez1585@gmail.com

                                    #7218
                                    ViolinSugar
                                    Customer

                                      @eric, here is the link.
                                      http://suzukimusiclessons.com

                                      I was able to re-generate thumbnails on the off center image (it was 1140 wide, but the slider kept displaying it cropped) and it fixed the off-center issue.
                                      The shadow is still hidden and off center… I wonder why.

                                      Thanks!

                                      #7238
                                      kronos
                                      Customer

                                        @ViolinSugar Looks fine on my end. Everything is showing up centered as it should. I’m viewing from a Macbook Air, Chrome, and my browser width is extended to the max. What size is your browser width? Even when I adjust it, it still stays in place just like the Optimal demo.

                                      Viewing 18 posts - 1 through 18 (of 18 total)
                                      • You must be logged in to reply to this topic.