Crystal Middle Page Images Misalignment

Community Forums Forums General Discussion Crystal Middle Page Images Misalignment

This topic is: resolved

Tagged: , ,

This topic contains 6 replies, has 3 voices, and was last updated by  dareadel 1 year, 1 month ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #58342

    dareadel
    Participant
    Post count: 82

    Hello,

    I am trying to duplicate the Crystal Demo but the images in the middle page are not aligning properly as shown here:

    Misaligned Images

    I tried to apply some CSS rules to align but not successful.

    Thanks in advance for your assistance.

    #58362

    Natalie
    Participant
    Post count: 11

    Try setting a min-height on the containing divs to be just a bit taller than your image size.

    • This reply was modified 1 year, 1 month ago by  Natalie.
    • This reply was modified 1 year, 1 month ago by  Natalie.
    #58373

    Tom
    Participant
    Post count: 892

    Hey, Ho, H20!

    Try this…

    Undo your CSS changes (this works out of the box).
    Use the responsive slider with settings of:

    • Category = portfolio
    • Show = 5, Offset = 0
    • Show Author Gravatar = No
    • Show Featured Image = yes
    • Thumbnail = Home Thumbnail 175×125 ——>>> Alignment = *LEFT*
    • Show Title = No
    • Show Post Info = No
    • Content Type = *No Content*

    This section should now look just like the demo.

    Edit:
    I just noticed that you’ll probably have to re-size the thumbnails for this middle section as the imported originals are too short as “home thumbnails”.

    • Grab the “Regenerate Thumbnails” plugin, activate, then go to Media Library.
    • Select (check) the 5 images for the middle portfolio section.
    • Select “Regenerate Thumbnails” from the Bulk Actions drop-down and “Apply”.

    This should pick up the 175×125 ‘home thumbnail’ size from the theme and regen these 5 images at the proper size.

    Have fun!


    Choose your next site design from over 350 Genesis themes.
    Updates via GenesisThemes.ca | Twitter | Google+ | Tumblr

    • This reply was modified 1 year, 1 month ago by  Tom.
    • This reply was modified 1 year, 1 month ago by  Tom.
    #58546

    dareadel
    Participant
    Post count: 82

    Thanks to both. I am the one doing it wrong. The demo does not display content and I did. It’s okay now and sorry for the trouble.

    • This reply was modified 1 year, 1 month ago by  dareadel.
    • This reply was modified 1 year, 1 month ago by  dareadel.
    #58551

    Tom
    Participant
    Post count: 892

    No trouble at all – it’s how we all learn. So thanks to you, too.

    For instance, I learned that the styling of the home slider in the Crystal theme demo doesn’t quite work ‘out of the box’ either – the image doesn’t sit squarely in the white border and gets scrunched to 580x290px from 600x300px.

    I had to adjust the slider CSS to eliminate the padding and margin values previously set at 10px, from:

    #genesis-responsive-slider {
    background-color: #fff;
    border: 10px solid #eee;
    margin: 0 auto;
    padding: 10px;
    position: relative;
    }

    to

    #genesis-responsive-slider {
    background-color: #fff;
    border: 0px solid #eee;
    margin: 0 auto;
    padding: 0px;
    position: relative;
    }

    It only worked for me by adjusting the slider CSS, which I would expect to get overwritten by any future updates to the slider, which is not the best solution.


    Tom


    Choose your next site design from over 350 Genesis themes.
    Updates via GenesisThemes.ca | Twitter | Google+ | Tumblr

    #58566

    dareadel
    Participant
    Post count: 82

    Thanks again Tom. I was tinkering with this also. The border doesn’t look good no matter what I did. I will try your suggestion on my site and I will give you a feedback.

    #58656

    dareadel
    Participant
    Post count: 82

    I will create another thread for this issue.

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

The topic ‘Crystal Middle Page Images Misalignment’ is closed to new replies.