- This topic has 2 replies, 2 voices, and was last updated 8 years, 4 months ago by Debbie.
-
AuthorPosts
-
January 1, 2016 at 5:56 am #81999DebbieParticipant
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.
/* 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; }
/* 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; }
January 2, 2016 at 9:45 am #82055SakinKeymaster@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; }
January 2, 2016 at 10:23 pm #82085DebbieParticipantI 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! 🙂
-
AuthorPosts
- The topic ‘Slider text not quite centered’ is closed to new replies.