Jump to content

Center Latest Items list on home page


JoJo

Recommended Posts

Posted

Maybe this has been covered before but I am unable to locate it in the forum.

Is there a way to center the list of the latest items on the home page?   

 

Also was wondering if that outer box grey line can be  made smaller and not visible without affecting the size of the picture?

 

I am using the Foundation skin with the latest version of CC 

thank you very much for this help

center.jpg

Posted

This will involve adding some new CSS and making a small, but important change to a template.

In content.homepage.php, find:

<ul class="small-block-grid-1 medium-block-grid-3 large-block-grid-3" data-equalizer>

Change to:

<ul class="small-block-grid-1 medium-block-grid-3 large-block-grid-3 panelslist" data-equalizer>

Then find:

      {foreach from=$LATEST_PRODUCTS item=product}
      <li>

Change to:

      {foreach from=$LATEST_PRODUCTS item=product}<li>

Then find:

      </li>
      {/foreach}

Change to:

      </li>{/foreach}

This adds a class we will use to override comparable settings found earlier, and removes whitespace between the panels that would otherwise cause the total width of the panels in a row to exceed the available width of that row, thus causing the last panel of a full row to move down to the next.

In /css/cubecart.default.css, add the following:

.panelslist {
  margin: auto;
  text-align: center;
}

.panelslist li {
    position: relative;
    display: inline-block;
    overflow: hidden;
    float: none;
}
.panel {
    padding: 0.50rem;
    border: none;
}

This does have the unfortunate side effect of centering the text within the panel. Maybe you can work on figuring out how to override that.

I found this answer here:

https://stackoverflow.com/questions/30698432/how-to-center-align-zurb-foundation-block-grid-elements-that-are-being-pushed-to?rq=1

The adjustment to the panel class affects all panels, everywhere.

 

Posted

Thank you again for your expertise B I appreciate it.  I am not even close to being a novice when it comes to css and when I search the net I always get confusing results when I type what I am looking for. But that's ok I am learning.

 I get frustrated with this build a few times a day but I won't give up t'ill it's done, this platform is excellent.

AND when I do get annoyed cause I don't understand, I just roll my chair to my sewing machine that's 2 feet away and go sew something...

then roll back to my 30 open windows and start again... lol

thank again 🙂

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...