Welcome! To use this support forum, please Login or Join Today!

   

Teaser Cropping

{name}
Rank

Total Posts: 2

Joined 2014-09-05

PM

 

On smaller devices, such as the IPhone, the teaser gets cropped vertically. Is there a way to change this so that the height is maintained and the teaser image gets cropped horizontally?

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

Unfortunately, It’s doing what it’s supposed to. To exclude the #teaser div from being responsive, you’d need to write specific media queries for each possible resolution.

{name}
Rank

Total Posts: 2

Joined 2014-09-05

PM

 

It appears that in order to have the teaser crop as I would like (horizontally instead of vertically) when responsive, I should change the Background Repeat setting for the teaser image to anything other than “Fill”.  I have experimented with this, and it works.  However, there seems to be a bug in that when this setting is anything other than “Fill” the Background Image gets shifted vertically.

When you select “No-Repeat”, the Background Image gets shifted up and you only see the bottom half of the image.  When you select any other “Repeat” option, the bottom half of the image is shown above the top half of the image.

I have tried overriding some of this with CSS, but am unable to do so.

Can you please test the settings as I describe and see if you encounter the same problem.

Thanks again,

Tom

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

I’m not clear on whether or not I’m testing this as you are seeing it. Perhaps it depends on the image itself? Is the image the same size as the teaser? Screenshots or some visuals would be a big help here.

The fill option negates CSS altogether because it adds a backstretch div to fill out the image area.

{name}
Rank

Total Posts: 2

Joined 2014-09-05

PM

 

I’ve attached some screen shots with the settings for each as noted below.  The background image size is 1024 x 320, the teaser height is set to 320, and the parallax offset is set to 0.

screen1.jpg : Background Repeat = Fill
screen2.jpg : Background Repeat = No-Repeat(center)
screen3.jpg : Background Repeat = Repeat-all(tile)


Attachments:

https://www.filepicker.io/api/file/aaRWQO6DQKOSrrjjXCpS


Attachments:

https://www.filepicker.io/api/file/5mBZ6pQ3T7STLZMoGeo4


Attachments:

https://www.filepicker.io/api/file/VrNUqSdbRQyOAxiB8dil

{name}
RankRankRankRank

Total Posts: 3667

Joined 2011-04-27

PM

 

I think I see what you’re saying. It looks like the parallax is working against you because the image design is absolute. The teaser is intended to show a text overlay on a background image.

I think your best bet would be to just add an Image Widget to the “Showcase” position. You don’t have to install the Image Widget plugin if you’d just prefer to add an <img> tag to a text widget.


When you installed the theme, it should have asked you if you want to install the Widget CSS Classes plugin. If you didn’t install it, you’ll want to do so now.

Then in the Showcase widget class, add “nopad”.

Lastly, go to Appearance → Editor and place this in your style.css:

#showcase .widget-container.nopad .container,
#showcase .widget-container.nopad .columns {
    
padding0;
    
margin0;
    
width100%;

This should give you the following result: http://cl.ly/1S253e0r2S33