Genesis Slider – Excerpt Positioning CSS

Community Forums Forums Design Tips and Tricks Genesis Slider – Excerpt Positioning CSS

This topic is: resolved

This topic contains 12 replies, has 2 voices, and was last updated by  Lisa at OG 1 year, 9 months ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #999

    Lisa at OG
    Participant
    Post count: 118

    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/

    #11925

    CathyT
    Participant
    Post count: 38

    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!

    #11942

    Lisa at OG
    Participant
    Post count: 118

    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.

    #11946

    CathyT
    Participant
    Post count: 38

    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.

    #11953

    Lisa at OG
    Participant
    Post count: 118

    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.

    #11968

    CathyT
    Participant
    Post count: 38

    Try this:

    find .slide-excerpt in the style.css

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

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

    #11969

    Lisa at OG
    Participant
    Post count: 118

    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?

    #11971

    CathyT
    Participant
    Post count: 38

    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>

    #11972

    Lisa at OG
    Participant
    Post count: 118

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

    #11974

    CathyT
    Participant
    Post count: 38

    Sorry Lisa, you put it together like this:

    [code]

    @media screen and (min-width: 960px) {
    .slide-excerpt {

    left: 35%;

    }}

    [/code]

    #11976

    Lisa at OG
    Participant
    Post count: 118

    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.

    #12077

    CathyT
    Participant
    Post count: 38

    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/

     

    #13534

    Lisa at OG
    Participant
    Post count: 118

    Thanks CathyT.

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.