• Closed
  • Tom
    Spectator
    29.03.2016 at 20:18 #26024

    Hi.

    I’m using evolve lite 3.5.0.

    The text and background of my front page bootstrap slider are over-writing too much of my slide images – it looks strange.

    The simplest solution appears to be to get rid of the slide description, make the slide title a little shorter and its font a little smaller. So I did that, but the background box behind the slide title didn’t adjust to the smaller title – it still extends to the middle of the image.

    When I look at it in Chrome dev tools I can see that my carousel caption has a width of 540px, so I tried changing the max-width in your style.css which was 540, but that didn’t work and I’m pretty much in over my head – I’m a developer but not a web developer – so I’m likely to do more damage then good like this!

    What should I be doing?

    Thanks. Tom

    Denzel Chia
    Moderator
    Posts: 2656
    30.03.2016 at 02:12 #26037

    Hi,

    Are you referring to the carousel caption p tag?
    You can reduce the padding, in order to reduce the “box”.

    #bootstrap-slider .carousel-caption p{
    padding: 0px !important;
    }

    If not, Please post your website URL and screenshot with annotation to explain your requirement.

    Thank you

    Tom
    Spectator
    Posts: 2
    30.03.2016 at 04:27 #26040

    Hi.

    It’s a new site that isn’t public yet, which is why I didn’t post the link. I meant the <h2>, not the <p>.

    In the end, I was able to fix the problem for desktop browsers – shrink the shaded box behind the slide title – by changing ‘right: 50%;’ to ‘right: 78%;’ in the following:

    #bootstrap-slider .carousel-caption {
    padding-top: 0;
    bottom: 12%;
    left: 60px;
    right: 78%;
    text-align: left;
    }

    But it doesn’t work on my phone with the original CSS or my modified CSS. Here is a partial screenshot (I cropped out the top) that shows the problem:

    https://goo.gl/photos/wNf3EbDXwdeUUnLg7

    You can see that the shaded box behind the slide title goes right across the screen (ignore the whitespace and the question mark) though the text fits to the left of the car. This was done with a Nexus 5 which has a very common screen resolution of 1920×1080.

    Thanks. Tom

    Denzel Chia
    Moderator
    Posts: 2656
    31.03.2016 at 02:57 #26090

    Hi,

    Try using media query and !important rule to the end of your custom css

    Thank you

    Tom
    Spectator
    Posts: 2
    31.03.2016 at 04:10 #26097

    I’m not a web dev so I don’t know what that means? Specifically I don’t know what a media query is or how to add “!important rule” to the end of my custom CSS.

    I got that custom CSS by just changing one number in the existing CSS after hacking a bit in chrome dev tools.

    Denzel Chia
    Moderator
    Posts: 2656
    31.03.2016 at 10:22 #26106

    Hi,

    I thought you understand programming because you posted some codes.

    I need to be able to see your website in order to assist in providing custom css.
    If not, all I can do is to make a guess.

    Please get back to me after you put your website online.

    Thank you