Crystal Middle Page Images Misalignment

[dareadel]

Hello,

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

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

Thanks in advance for your assistance.

[Natalie]

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

[Tom]

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 175x125 ------>>> 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 175x125 '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.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[dareadel]

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.

[Tom]

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.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[dareadel]

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.

[dareadel]

I will create another thread for this issue.

[Author]

Posts