Make RSS Feed Module three equal columns

[lbrochstein]

Hello there. I am trying to make the RSS feed module show in three equal columns on the homepage of my website. I have searched for an answer, but can't find one. Is there an easy way to make this change? 

Here is the link - https://www.warmcommerce.com/?hs_preview=FtqwLBoe-31347187227

[jonchim · Accepted solution]

Hi @lbrochstein ,

You can do this via flex or grid, once you apply these styles something like the below you'll have to change the floats on the featured image that its pulling so that it sits on top of the title.

.hs-rss-module .hs-rss-item {

      width: 33%;

}

.hs-rss-module {

     display: flex;

      flex-wrap: wrap;

}

[jonchim · Accepted solution]

Hi @lbrochstein ,

You can do this via flex or grid, once you apply these styles something like the below you'll have to change the floats on the featured image that its pulling so that it sits on top of the title.

.hs-rss-module .hs-rss-item {

      width: 33%;

}

.hs-rss-module {

     display: flex;

      flex-wrap: wrap;

}

[lbrochstein]

Thanks, @jonchim ! That is working to put it in columns, but I don't have any clue how to change the floats. Can you give me the code for that as well please?

https://www.warmcommerce.com/?hs_preview=FtqwLBoe-31347187227

[Kevin-C · Accepted solution]

Jey @lbrochstein 

I added a little to @jonchim 's CSS. not sure if this is the look you're going for but wortha shot:

.hs-rss-module .hs-rss-item {
width: 33%;
  display: flex; /*make the parent a flex container*/
  flex-direction: column; /*display the content in a column*/
}

.hs-rss-item-text {
  order: 2; /*reorder the position of the text block*/
}

.hs-rss-module .hs-rss-item .hs-rss-item-image-wrapper{
  width: unset; /*reset the width of the image*/
  padding-right: 20px; /*padding to match the etxt block*/
  order: 1; /*reorder the position of the img wrapper block*/
}

.hs-rss-module {
  display: flex;
  flex-wrap: wrap;
}

[lbrochstein]

Hi @Kevin-C That is great! Now, I just need the images to be a bit larger. Same size as the column width and centered aligned over the columns....

Thank you so much for all the help!!

[Kevin-C]

@lbrochstein Glad it helped!

When you say large my designer eye twitches! Lol

Your images are set to 100% (since we "unset" the width) of its parent container, the column. The columns are set to 33% of the parent container. So if you want larger images you'll have to increase the size of the parent container. To do that you must increase the size of, or change the max-width of the top most "row-fluid" of the associated content block in your template (i'm not sure of a more concise way of saying that…).

Now I'm not sure what tools you're using to modify your templates, be it the drag and drop layout tool or hubl + html templates.

If using the design manager look for the row with your custom modules. Add a custom css class or inline styling to the block.

If using hubl + html look for this clode block:

<div class="row-fluid-wrapper row-depth-1 row-number-59 dnd-section dnd_area_main_banner-row-10-padding">…

and add an inline style to modify. Like so:

<div class="row-fluid-wrapper row-depth-1 row-number-59 dnd-section dnd_area_main_banner-row-10-padding" style="max-width: 1366px">

Or add a css class to handle this:

<div class="row-fluid-wrapper row-depth-1 row-number-59 dnd-section dnd_area_main_banner-row-10-padding my-newclass">

.my-new-class {
  max-with:  1366px!important;/* important may not be needed */
}

For scalability and maintenance I would opt for the additional class option.

[Kevin-C]

For good measure: Your templates are using a custom css framework. You'll see the "dnd-…" everywhere. This framework might have a class designed to do exactly what I just mentioned!

[lbrochstein]

I found the dnd file, but couldn't really understand it! 

If you look at the page, the featured image is super small. It's doing what is supposed to do, but it is tiny....

https://www.warmcommerce.com/?hs_preview=FtqwLBoe-31347187227

[Kevin-C]

Ah thats my bad. We need to overwrite the image container size rather than just unset it. Ive updated the css below:

.hs-rss-module .hs-rss-item {
  width: 33%;
  display: flex; /*make the parent a flex container*/
  flex-direction: column; /*display the content in a column*/
}

.hs-rss-item-text {
  order: 2; /*reorder the position of the text block*/
}

.hs-rss-module .hs-rss-item .hs-rss-item-image-wrapper{
  width: 100%!important; /*reset the width of the image*/
  padding-right: 20px; /*padding to match the etxt block*/
  order: 1; /*reorder the position of the img wrapper block*/
}

.hs-rss-module {
  display: flex;
  flex-wrap: wrap;
}

The order the css is loaded is what'll cause this. If this doesn't fix it, you now know that its the "hs-rss-item-image-wrapper" that needs modified. Specifically the width property.

[lbrochstein]

That's getting there!! Now, the problem is the wrap within the column. It doesn't go all the way across. Maybe it's because of the size of the columns? Not sure, but the images are good, although I would love them to be the same size all the way across.

I really appreciate the help you are giving me!!

https://www.warmcommerce.com/?hs_preview=FtqwLBoe-31347187227

[Kevin-C]

Hey @lbrochstein 

Add this:

.hs-rss-item-text {
  order: 2; /*reorder the position of the text block*/
  width: 100%!important;
}

[lbrochstein]

Worked on the first one, but not the second! Also, is there a way to get the images to all be the same size as the first image?

Thank you!!

[Kevin-C]

Hey @lbrochstein

The issue is that the images are acutally different sizes adn aspect ratios. See below:

Consistancy from the author/designer will fix this. But a fall back would be to add a 'max-height' to the image wrapper class adn 'overflow: hidden'.

max-height: 240px;
overflow: hidden;

That might sound harsh but ensuring the correctly formatted assets is not only important for the UX, but more importantly the page performance. "Quality in quality out" as they say. To illustrate: The chains image is ~1.25mb vs the other image that is ~551kb.

You can use the lightouse tool from google to audit this and even get great fixes and insihts!