0

If you go to my website and look at the carousel http://indigomeadowscrafting.com/ How to I move the containers or boxes (I haven't learned all the lingo) so that it is more centered in the small border above where the images will be? You see that the previous button is on the image but the right one isn't. It is just off center a bit and driving my sense of balance batter.

I did try to use the chrome devtools to try and move it about but although I did many things nothing worked. I did try to change the float on line 31 in the responsive.css file to center but when I do that the carousel becomes a vertical line.

Thanks for any info!

Rachel

ETA: This was placed on hold and I asked why in the below comments. If you need more info please ask since I don't know what more you need.

Also see the other comments below as well because this explains further what more has been done.

ETA: Here is a screen shot of what I was talking about with the elements.style. elements.style

closed as off-topic by mbalparda, Fabian Blechschmidt, ProxiBlue, Amit Bera, Keyul Shah Oct 15 '14 at 3:11

  • This question does not appear to be about the Magento e-Commerce platform within the scope defined in the help center.
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 4
    This question appears to be off-topic because it is about HTML/CSS – mbalparda Oct 14 '14 at 23:01
  • mbalparda is right, I think this question is better for webmasters.stackexchange.com Beside this, you should add more informations what you tried and what the problem is. Additionally you should add a screenshot of the current state and what you want it to be. – Fabian Blechschmidt Oct 14 '14 at 23:18
0

This is sure css part.

you can either reduce carousel wrapper width or increase the list items or do following:

.jcarousel li {
width: auto !important;
margin-right: 55px;
......
......
}

Edit 1

Try this:

.jcarousel {
...
...
width: 96%;
margin-left: 33px;}

.jcarousel-control-prev{left:0px !important;}
.jcarousel-control-next {right: 0px !important;}

Should help, but this method will impact to any other jcarousel if you have in your site. I would give a another class name along with jcarousel and then give it a style as above.

  • Thanks for the response. I tried everything you said and variations of. That button is still on the image. :) – Rachel Oct 15 '14 at 0:23
  • See my edit, hope it will help – Adarsh Khatri Oct 15 '14 at 4:47
  • Thanks again for all the help. I made the changes and it still won't fix it. However I have found something that will but I don't know how to alter it. When using the element inspector tool in FF or Chrome there is an element.style that comes up. It is overriding the jcarousel li width settings. It is keep the width at just over 267. I need it at 225. When I change it in the CSS file to 225 nothing happens. The element.style still sets it at 267. I hope that makes sense. – Rachel Oct 15 '14 at 19:16
  • It is 257 pixels not 267. Trivial but I was mistaken on the size. It still needs to be changed. – Rachel Oct 15 '14 at 19:40
  • Nevermind! I got it to stay. Thanks for the help! – Rachel Oct 15 '14 at 19:45

Not the answer you're looking for? Browse other questions tagged or ask your own question.