Jump to content

Change sizes of product boxes on homepage


djcaseanova

Recommended Posts

I am working on the foundation theme, I am looking to get the font size which is HUGE to something smaller for the product boxes. I would also like to see if there is a way to make the product boxes themselves smaller? Regardless of how many products I display in the "Latest Products" on the homepage, the boxes don't resize. So, there must be something I am overlooking. A row consists of 3 products, which is great, but the boxes are so long (vertically), I would like to reduce them by at least 25% if possible.

 

Thanks!

Link to comment
Share on other sites

The "panels" in Latest Products should shrink when the viewport gets narrower, but not in the 'large' mode.

The font size of Foundation is currently based exclusively on the default font size you have set in your browser settings. (In a default Firefox installation, the default font set in Tools, Options, Content tab is Times New Roman 16pt. The Advanced Fonts dialog of your browser will set a default font when the 'font-family' simply mentions "sans-serif".

But there is a serious flaw in the philosophy behind Foundation's responsiveness: it's entire responsiveness is keyed against the font size. Change the primary font size and everything scales accordingly.

That leaves us with the less than uber-simple task of adjusting CSS rules for header tags, or making specific rules for changing only exactly that what we want to change.

Lastly, the panels do not resize relative to everything else, because, as above, everything resizes together.

More panels can be made to fit across in the space provided by using a different CSS class.

In content.homepage.php, find near line 21:
<ul class="small-block-grid-1 medium-block-grid-3 large-block-grid-3" data-equalizer>

Change:
large-block-grid-3
to:
large-block-grid-4

The data-equalizer makes sure each panel is no less tall than the tallest panel. So, if you have really tall panels, find the one panel that is that tall and do whatever to reduce it's bulk.

Link to comment
Share on other sites

Okay. Can you explain the process behind this. What's the difference between Small-block, medium-block, large-block? Like is there an example of each of these? And is increasing the -3 to -4 decreasing the size? So the larger the number, the smaller the size? Does that apply for everything in these templates?

So, let me show you what I am trying to achieve. My custom skin site for now looks like this image below. The font is huge on featured products and latest products, but not under best sellers. The font size under best sellers is what I am trying to get close to across the entire skin. And as for the size of the product panels/boxes they are very large in my opinion. The best example I can give to what I am trying to achieve is a site I found in the show-off area. That image is below as well.

 

fontandboxsize.png

 

This is claudiasbargains.com skin (as seen in the show off forum). I am assuming this is based off of the foundation skin, if it's not do you know which it is? This is basically the style I am going for. Very simple and clean in my opinion.

 

claudiasbargains.png

Link to comment
Share on other sites

"What's the difference between Small-block, medium-block, large-block?"

Foundation's CSS classes that affect layout are grouped into sizes: small, medium, large, xlarge, and xxlarge. If the browser window is at a medium width, then the medium group of CSS rules apply.

Within a limited amount of space, increasing the quantity of somethings within that space requires those somethings to get smaller.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...