[Debbie]

I took what you gave me on Increase the width of the slider content area, plus some info on setting a transparent background for the slider text that I found elsewhere on these forums, and updated my miboxdallas.com site. Today, I then took the same css and copied it to my theo.solutions site (which I just upgraded to Adventurous Pro), except that I changed the slider text to be at the bottom of the slider instead of the top.

For some reason I never noticed before, or maybe ran out of time, but the text area is not quite centered left-to-right on either of these sites … there’s a little more spacing on the left than on the right. It’s particularly noticeable on small screens.

http://miboxdallas.com/

/* Slider title/text area */
#main-slider .entry-container {
    bottom: auto;
    top: 15%;
    left: 10%;
    width: 80%;
    background:rgba(0, 0, 0, 0.4);
    color: #ffffff;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-style: italic;
    padding: 1em 1em;
    padding: 1rem 1rem;
}

http://theo.solutions/

/* Slider title/text area */
#main-slider .entry-container {
    top: auto;
    bottom: 15%;
    left: 10%;
    width: 80%;
    background:rgba(0, 0, 0, 0.4);
    color: #ffffff;
    padding: 1em 1em;
    padding: 1rem 1rem;
}

[Sakin]

@violetdeb: Hi Debbie,

I don’t understand why you have padding as 1em and also as 1 rem. You need to use only one of those. It’s because of padding, the space is not managed. You can add additional css there

   -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;

So, your css will be as:

/* Slider title/text area */
#main-slider .entry-container {
    bottom: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
    top: 15%;
    left: 10%;
    width: 80%;
    background:rgba(0, 0, 0, 0.4);
    color: #ffffff;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-style: italic;
    padding: 1em;
}

[Debbie]

I don’t know why I had both either … probably pulling together css from multiple sources (to get the box background, the fixed-width, the top of page, etc) and didn’t notice I had duplicates.

Thank you for your help — both sites are now fixed! 🙂

[Author]

Posts