Responsive Hexagons

Support
#1

Hi all, I’ve got a layout issue that’s got me scratching my head for days, and I can’t work out how to solve it.

What I need to do is create a section with 6 tout boxes, each with a hexagon-shaped background. The layout needs to look like this:

Screen Shot 2020-09-04 at 9.51.33 AM
Screen Shot 2020-09-04 at 9.51.33 AM1796×1316 239 KB

At larger viewport sizes the grid will be 3x2 as per the illustration, moving to 2x3 for midsize viewports and 1x6 for the smallest viewport.

The hexagons need to maintain their shape at all viewport sizes, and the text needs to stay within the hexagon shape boundary.

I tried using an image as a background within a column, but since I cannot force a column to have a particular aspect ratio regardless of viewport size, the background image gets masked-out at certain viewports. Also, the icon and text overflows outside of the hexagon shape at mobile viewport sizes.

I tried to add the shape as CSS instead, such as how it’s explained here, but the hexagon gets broken if I add the class to the column. I tried playing around with Custom Attributes, but without any luck.

Any advice would be greatly appreciated.

#2

Something like this? https://www.combatbase.com/membership-test/#hex

I think the best way to do it is by setting the grid cell background as the image you want and then using the max-width property to keep everything inside the hex. You’ll also want to set the background-size to “contain” so the hex image always fully displays.

Depending on your content you can adjust the font-size and max-width to get the look you want. Throw in some media queries and it should look pretty good.

1 Like
#3

This looks pretty good! Thanks for taking the time.

I think my biggest issue was forgetting about using a ‘contain’ background-size attribute.

#4

No problem! Good luck!

#6

Hi @KEXINO,

Can you please tell, whether you are still having the issue or not. By withdrawing the post, I assume you already have resolved the issue.
If the issue still exists, you can let us know.

Thanks.

#7

Hi there.

Yes, I still have the issue. I posted a comment where I couldn’t get a particular CSS media query to work (turns out I had to add !important to solve that). Since I was able to solve that issue, I deleted that particular comment.

Anyway, here’s where I am:

  • Currently using an image rather than CSS for the hexagon background
  • The text content for each hexagon is of varying lengths (some headlines break to 2 lines, text elements vary from 2 lines to 5 lines) meaning the alignment and reflow for each hexagon changes per element, as well as per viewport.
  • Spacing of the hexagons isn’t optimal for each breakpoint. There’s too much space (left to right) between hexagons when viewed at smaller viewports.
  • I will also need to make the entire content of the column clickable, with a hover effect.

Let me know if you need me to post the URL. Site is in dev mode, so will need to post creds by Secure Note.

Thanks in advance.

#8

Hi @KEXINO,

What you are trying to achieve would require customization and which is beyond the scope of theme support.

I would suggest you hire a developer who can assist you to do the customization or you can avail our newly launched service called One, where the customization questions are answered.

Thanks

#9

I had reached out on “One” before posting my request here.

Rue Nel, had said you guys would be able to help me…?

#10

Hey @KEXINO,

One support is exclusively available if you have subscribed to a single or all platform package.

Anyways, what you have in mind is possible ONLY with custom CSS. That is why I have sent you the tutorial link. Be advised that it has a different element structure which is why you cannot simply add hexagon class to a column or any other element. What you can do is this:

1.) Go to the X/Pro > Global Block. Create a block and insert the contents you want to add inside the hexagon. You should create blocks if you need to several columns.
2.) Edit your page and insert a section, row and columns.
3.) In each of the columns, insert a content area element.
4.) In each of the content area elements, insert the HTML structure from the tutorial
5.) Put the global block shortcode inside of each code. See the example below:

<div class="hexagon"><span>[place the shortcode here]</span></div>

And off course, you will have to modify the CSS code, adjust the needed value to make it bigger, and fit the contents inside the hexagon. For more added reference, check out these links:

Note: If you are unfamiliar with code and resolving potential conflicts, you may select our One or Care service for further assistance. We are unable to provide support for customizations under our Support Policy.

Thank you for your understanding.

#11

Thanks for this Rue!

Again, I am fully-familiar with Themeco’s support policy, which is exactly why I reached out on ‘One’ before opening a support thread here. I only posted here because I was advised to.

I’ve implemented according to your instructions, but am having a tough time tweaking positioning. I will purchase a one month ‘One’ plan to have you guys help me.

#12

You are most welcome @KEXINO.

#13

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