Illustratr Gallery Carousel Close X too small

howardbutterworth · Member · Apr 30, 2015 at 11:23 am
Copy link

Add topic to favorites
Hi, I find that the x close button in the gallery carousel for the Illustratr theme is too small and easily missed. Is it possible to enlarge the font or use an icon instead? Not sure I can do this in the custom CSS
Thanks in advance
JP

The blog I need help with is: (visible only to logged in users)
staff-jeanpierreac · Staff · Apr 30, 2015 at 1:18 pm
Copy link
Hi!
Could you please explain us (maybe with the URL or image) which is this button. I’m so sorry, but not being able to see it!
howardbutterworth · Member · Apr 30, 2015 at 1:27 pm
Copy link
Hi,
The url for the page is

Home

The close button (x) to get out of the gallery carousel feature is in the top left-hand corner and is much smaller than the left right buttons making it not particularly easy to see

Thanks again
JP
staff-jeanpierreac · Staff · Apr 30, 2015 at 1:53 pm
Copy link
Ok! Understood :)

So rigth now your close button (x) is defined in a span element inside a .jp-carousel-close-hint class div. Most important attributes for you to change X size are font-size (now 24px) and div-size (Now 22x22px). You can, for instance, double font and span size adding this Custom CSS code:
```
.jp-carousel-close-hint span {
    height: 44px;
    font-size: 48px;
    width: 44px;
}
```
In addition as your .jp-carouse-close-hit area (div) has a fixed position, you could move it by changing top and left values (vertical and horizontal displacement from the upper left corner). You can use this code and modify values to fit in your layout.
```
.jp-carousel-close-hint {
    top: 50px;
    left: 200px;
}
```
I hope this helps you. Enjoy blogging!
howardbutterworth · Member · Apr 30, 2015 at 7:42 pm
Copy link
Hi again,
I put this code into the custom CSS and the lower code allows me to move the x around, but the upper code seems to get over-ruled when you inspect the elements. I am using Chrome. Sorry to be a pain
JP
staff-jeanpierreac · Staff · Apr 30, 2015 at 9:27 pm
Copy link
Hi! Not a pain at all! :)

As you say, this code is over-ruled. Sorry about that. You need to add “div” to make more specific your rule, and !important to the end of font-size statement as the other rule mark font statement as !important
```
div.jp-carousel-close-hint span {
  height: 44px;
  font-size: 48px !important;
  width: 44px;
}
```
I hope it is ok now!
howardbutterworth · Member · May 1, 2015 at 6:33 am
Copy link
That is perfect, thank you for your help
JP
staff-jeanpierreac · Staff · May 1, 2015 at 7:13 am
Copy link
Glad To read that!! :)

No items found.