Icon Blocks Items Per Row

Post here if you have questions about creating SuperFlexi Solutions.

The SuperFlexi documentation is very thorough, so you might want to start there.

1/2/2022 6:58:38 PM
Gravatar
Total Posts 49

Icon Blocks Items Per Row

Hi all

I am not an experienced web developer but have some general knowledge and understanding. I have read up about SuperFlexi and the icon blocks. I had a web developer configure this feature but they put some of the code in the style.css and some is in the icon-blocks-base.css.

I want to change the default dimensions of the icon blocks, to 4 or 5 columns, ie 4 or 5 blocks per row.

I changed the itemsPerGroup to 4  in the .sfMarkup file but this hasn't changed anything.

Am I on the right track or can this not be changed?

Kind regards, Sandy

1/6/2022 1:50:52 PM
Gravatar
Total Posts 211

Re: Icon Blocks Items Per Row

You'll have to change a couple things to do 4 in a row:

<ItemsRepeaterMarkup itemsPerGroup="4"><![CDATA[<div class="row icon-blocks__row flex-children flex-stretch">$_Items[0]_$$_Items[1]_$$_Items[2]_$$_Items[3]_$</div>]]></ItemsRepeaterMarkup>

and

<div class="col-md-3 flex-children flex-stretch fb-wrap">

The DIV col-md-3 may depend on your skin CSS. So play with that. There may be padding and margin tweaks to make as well. I'd copy the solution with a new name and GUID, instead of modifying the stock version.

 

And SuperFlexi caches so after making a markup change edit one of the items in the solution which seems to clear the cache. Make sure your changes are taking effect before you pull your hair out making changes and nothing is happening.

1/6/2022 3:55:33 PM
Gravatar
Total Posts 49

Re: Icon Blocks Items Per Row

Hi Eric

I had already changed ItemsRepeaterMarkup itemsPerGroup="4" but it was the additional $_Items[3]_$ I needed to add.

I can't find where to edit div class="col-md-3 flex-children flex-stretch fb-wrap". It's not in my style.css or any other css file in my site.

The web developer added this into my style.css  -  width: calc(33.33% - 30px); - I had to change that to 25% and I get the 4 in a row. If I comment it out, the Block Title does not wrap. This is the code they used:

.icon-blocks-module .icon-blocks .row div.flex-children {
   width: calc(33.33% - 30px); <-- I  changed this to 25%
   float: left;
   padding-left: 15px;
   padding-right: 15px;
   text-align: center;

Is there a better way of styling this? Would it be better to move the icon-blocks-module styling into the icon-blocks-base.css?

Thank you for taking the time to respond.

Kind regards, Sandy

1/7/2022 4:36:50 PM
Gravatar
Total Posts 212
Community Expert

mojoPortal Hosting & Design @ i7MEDIA!

Re: Icon Blocks Items Per Row

Hi Sandy,

The intended purpose of icon-blocks-base.css is to include any styles that are required for the proper display of the SuperFlexi Solution. That said, we've assumed that people are working with skins built off of our Framework, and that means they'd already include styles for the bootstrap grid ("col-") or flexbox grid ("fb-") classes, so we don't normally include them there. It is best to keep your custom styles in style.css because icon-blocks-base.css may be overwritten if you update to a newer version of the solution - particularly if the solution you're using is located in /data/SuperFlexi and not in /data/sites/#/SuperFlexi, as the former may be overwritten whenever you update mojoPortal. This is likely why Eric suggested earlier that you copy the solution and change the name and GUID, as that will prevent overwrites regardless of location.

As for a better way to style things, it depends. If your skin already includes the bootstrap / flexbox grids, you ought to be able to achieve a 4 column layout without custom CSS at all - you would just change the classes in the .sfMarkup file as Eric already suggested (to clarify, this is located just a bit below the ItemsRepeaterMarkup change you already made in the .sfMarkup).

If your skin doesn't support those grids, the solution you have should work fine as long as you don't care too much about different sized screens. If you look on a phone, you probably don't want the icon blocks to be in a row there. If you are concerned with this, the following CSS should offer a starting point to making the solution mobile friendly:

/* Mobile styles are the defaults, wider styles overwrite / add to them. */
.icon-blocks-module .icon-blocks .row div.flex-children {
	text-align: center;
}

/* Simple breakpoint at 768px. Your styles will now only apply to screens
   768px in width and above, leaving the phone styles to be default 100% blocks.
   You may want to adjust the 768 value depending on your needs. */
@media (min-width: 768px) {
	.icon-blocks-module .icon-blocks .row div.flex-children {
		width: calc(25% - 30px);
		float: left;
		padding-left: 15px;
		padding-right: 15px;
		text-align: center;
	}
}

There are of course many ways to accomplish anything in CSS, in my experience usually the "better" one is just whichever one solves your problem in the fewest lines of code. So if your site isn't adapted for mobile at all, don't bother adding a media query, and if your site uses bootstrap / fb-grids already, avoid adding any new CSS by utilizing them properly.

Hope this helps!