Genesis Slider – Excerpt Positioning CSS

[Lisa at OGParticipant Post count: 39]

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/

---

Owner and Co-Founder of Original Ginger
Where Fresh Strategy Meets Digital Design
Website: http://www.originalginger.com

[CathyTParticipant Post count: 31]

Did 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!

[Lisa at OGParticipant Post count: 39]

I 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.

---

Owner and Co-Founder of Original Ginger
Where Fresh Strategy Meets Digital Design
Website: http://www.originalginger.com

[CathyTParticipant Post count: 31]

Since this is a dev site, can you put up an excerpt so I can see it? Then I can make a more informed suggestion.

[Lisa at OGParticipant Post count: 39]

I 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.

---

Owner and Co-Founder of Original Ginger
Where Fresh Strategy Meets Digital Design
Website: http://www.originalginger.com

[CathyTParticipant Post count: 31]

Try this:

find .slide-excerpt in the style.css

and add to the bottom of it, before the closing bracket “}”

<code>left: 35%;</code>

[Lisa at OGParticipant Post count: 39]

Yes, 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?

---

Owner and Co-Founder of Original Ginger
Where Fresh Strategy Meets Digital Design
Website: http://www.originalginger.com

[CathyTParticipant Post count: 31]

Great. You can specify that the centering only is for large screens using this:

<code>
@media screen and (min-width: 960px) {
your css here
}
</code>

[Lisa at OGParticipant Post count: 39]

Okay, 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%;
}
}

---

Owner and Co-Founder of Original Ginger
Where Fresh Strategy Meets Digital Design
Website: http://www.originalginger.com

[CathyTParticipant Post count: 31]

Sorry Lisa, you put it together like this:

<a href="http://www.studiopress.com/forums/users/media/" rel="nofollow">@media</a> screen and (min-width: 960px) {
.slide-excerpt {

left: 35%;

}}

[Lisa at OGParticipant Post count: 39]

Right. 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.

---

Owner and Co-Founder of Original Ginger
Where Fresh Strategy Meets Digital Design
Website: http://www.originalginger.com

[CathyTParticipant Post count: 31]

This 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/

 

[Lisa at OGParticipant Post count: 39]

Thanks CathyT.

---

Owner and Co-Founder of Original Ginger
Where Fresh Strategy Meets Digital Design
Website: http://www.originalginger.com

[Author]

Posts