Community Forums › Forums › Archived Forums › Design Tips and Tricks › Genesis Slider – Excerpt Positioning CSS
- This topic has 12 replies, 2 voices, and was last updated 11 years, 2 months ago by Lisa at OG.
-
AuthorPosts
-
November 20, 2012 at 6:07 pm #999Lisa at OGMember
We are using a studiopress theme from the community. We have a genesis slider at the top of our home page. We have made the slider images full screen width at 100% regardless of size of monitor. We'd like to set the excerpt content so that it lines up with the content below it (960)
rather than flush with the left margin - we figure 60% would work so it's always in the same place no matter what size monitor; however, not
sure what code to add or to where. Tried a few things unsuccesfully. Anyone got a solution for this?
URL http://www.originalginger.com/demos/legacy-2/January 14, 2013 at 3:25 pm #11925Cathy @ WPBaristaMemberDid you resolve this issue? I dont see an excerpt that looks out of place at the moment. Let me know if you need more assistance with this!
Visit WP Barista to download 52 Quick Edits You Can do Today to Get More Clicks / Views / Sales. I also do paid support (starting at $75) and fully custom Genesis Child Themes.January 14, 2013 at 4:01 pm #11942Lisa at OGMemberI did not resolve it. As a result, we haven't used the excerpt. If you have some potential solutions, I'd love to hear about them Cathy.
January 14, 2013 at 4:08 pm #11946Cathy @ WPBaristaMemberSince this is a dev site, can you put up an excerpt so I can see it? Then I can make a more informed suggestion.
Visit WP Barista to download 52 Quick Edits You Can do Today to Get More Clicks / Views / Sales. I also do paid support (starting at $75) and fully custom Genesis Child Themes.January 14, 2013 at 4:34 pm #11953Lisa at OGMemberI have now down so. I hope this helps. I have been unable to create a solution to date that will allow the excerpt to stay to the left in a 960 grid, rather than moving to the left margin of the slider when it resizes based on monitor size. Any help would be so much appreciated.
January 14, 2013 at 6:18 pm #11968Cathy @ WPBaristaMemberTry this:
find .slide-excerpt in the style.css
and add to the bottom of it, before the closing bracket "}"
<code>left: 35%;</code>
Visit WP Barista to download 52 Quick Edits You Can do Today to Get More Clicks / Views / Sales. I also do paid support (starting at $75) and fully custom Genesis Child Themes.January 14, 2013 at 6:41 pm #11969Lisa at OGMemberYes, thank you Cathy, this solution works nicely at 23.25% for a full size monitor BUT when the slider resizes to an iPad it pushes the excerpt out of line to the middle of the image and on an iPhone it completely disappears off of the screen altogether. In these cases the excerpt does actually need to be against the left margin. I'm thinking that we will need to add something to our code that the left: 23.5%; does not apply when viewed on a mobile device. Any ideas?
January 14, 2013 at 6:49 pm #11971Cathy @ WPBaristaMemberGreat. You can specify that the centering only is for large screens using this:
<code>
@media screen and (min-width: 960px) {
your css here
}
</code>
Visit WP Barista to download 52 Quick Edits You Can do Today to Get More Clicks / Views / Sales. I also do paid support (starting at $75) and fully custom Genesis Child Themes.January 14, 2013 at 6:53 pm #11972Lisa at OGMemberOkay, I will try this. Hmmm. I've removed all other responsive code that existed in the original theme because we do separate mobile optimized coding for our client sites. Would that be why the code you have given me isn't working? I added this at the end of my standard CSS:
@media only screen and (max-width: 600px) {
.slide-excerpt {
left: 23.25%;
}
}January 14, 2013 at 6:56 pm #11974Cathy @ WPBaristaMemberSorry Lisa, you put it together like this:
@media screen and (min-width: 960px) { .slide-excerpt { left: 35%; }}
Visit WP Barista to download 52 Quick Edits You Can do Today to Get More Clicks / Views / Sales. I also do paid support (starting at $75) and fully custom Genesis Child Themes.January 14, 2013 at 7:02 pm #11976Lisa at OGMemberRight. Thank you for assisting but it still has no affect on the iPad or iPhone. There was a typo above. I did use min-width and 960px.
January 15, 2013 at 11:57 am #12077Cathy @ WPBaristaMemberThis is the same % indent on all widths: http://www.studiopress.com/responsive/?http://www.originalginger.com/demos/legacy-2/
To target individual devices, try this tutorial: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Visit WP Barista to download 52 Quick Edits You Can do Today to Get More Clicks / Views / Sales. I also do paid support (starting at $75) and fully custom Genesis Child Themes.January 21, 2013 at 1:18 pm #13534Lisa at OGMemberThanks CathyT.
-
AuthorPosts
- The topic ‘Genesis Slider – Excerpt Positioning CSS’ is closed to new replies.