Multiple icons in one row

Hi!
I am having a little problem. I am trying to achieve a similar look as shown in the picture.
I have used 2rows. 1st row with the ticker and the 2nd row with 3 columns.
In the 3rd column I want 3 rows with 3 icon-counters in each row.
I am just not able to achieve it. It is TOO big. Can you please help

Thank you so much!
AJ

Hey There,

Regretfully, at this time I am not entirely certain what it is you would like to accomplish based on the information given in your email. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks.

Okay. I hope you can see the screenshot attached above. Based on that I’ll tell you what I want to achieve.

I am having problems in making my page look like this.
I am able to get the news ticker (with the help of a plugin). The problem comes when i am dividing the page into three columns.
I’ll break down my problems -

  1. The height of the three columns should be the same. The map should fit in the centre column (3/5th) and the pointers on both side should fit in their respective columns (1/5th each)
  2. I am also not able to gather what shortcode should i use for the boxes on the left (content band/alert/feature box). something that looks neat and fits well aesthetically.
  3. Similarly for the icons and pointers on the right.

What I have done so far

  1. I have created a section with 2 rows. First row has one column with the news ticker.

  2. the 2nd row has 3 columns. First column with rectangular pointers. 2nd column with map and 3rd column with icons and counters.

PROBLEM I AM FACING

  1. just like the screenshot attached, I want icons and counters in the 3rd column of the second row.
    I want total 9 of these in a way that there are three icon-counters in each line and the total length of the column should be the same as the first and second column. I cant do this because the icons become too big

Please help me out!
Thanks and regards
AJ

I am using this

[counter num_start=“0” num_end=“407” num_prefix=" " num_speed=“1500” num_color="#9b59b6" text_above="" text_below=“Enter text here”]

Hi AJ,

Please start with the basics so you don’t complicate things. Start with a basic 1/5 + 3/5 + 1/5 columns, enable the marginless columns option on your ROW so the columns will have same height.
then use a Classic Block Grid element on the 3rd column to inline your icon shortcode and counter shortcode.

Look at all Cornerstone’s elements in action here and see which fits for your content on that left column.

Image element and other elements have margin/paddings, width, max-width, and other settings on them so you can apply a spacing on it, position it, or resize it.

These should give you a headstart, let us know what you got after.

Cheers!

Hi
I have been using the text editor all this while.
could you please tell me how to inline the icon and counter shortcode fo the 3rd column?
Please

Thank you so much!
AJ

Hi There,

You can try with the columns shortcode.

Something like this:

[column type="1/3"][counter num_start="0" num_end="407" num_prefix=" " num_speed="1500" num_color="#9b59b6" text_above="" text_below="Enter text here"][/column] [column type="1/3"][counter num_start="0" num_end="407" num_prefix=" " num_speed="1500" num_color="#9b59b6" text_above="" text_below="Enter text here"][/column] [column type="1/3" last="true"][counter num_start="0" num_end="407" num_prefix=" " num_speed="1500" num_color="#9b59b6" text_above="" text_below="Enter text here"][/column]

http://demo.theme.co/ethos-1/shortcodes/columns/

Hope it helps :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.