CMS Development

Trifecta
Participant

Getting Custom module to align horizontally vs vertically

Hi,

I have created a landing page as a homepage replica. The LP is title Location Template. I am experiencing two problems..

 

1. The custom module title Sample Meal Items are aligning vertically in full width as opposed to the desired 4 equally spaced columns aligning side by side.(similar to our homepage( www.trifectanutrition.com). Because hubspot designed these pieces I am having trouble with the alignment using css.

 

2. The bottom Module with the text "Ready to Start Living Better?" should have the image workout1.jpg  as the background. I am unsure with the Hubl module how to get it to show the background. Ideally this would also mimic the bottom module on our homepage titled the same " Ready To Start Living Better?"

Its should look like this...screencap.JPG

 

 

Any guidance to fix these issues would be greatly appreciated!!!!!!!!

 

0 Upvotes
2 Replies 2
Caroline_S_Lane
Participant | Elite Partner
Participant | Elite Partner

Getting Custom module to align horizontally vs vertically

Amzing @simmpaul Thanks for that!

0 Upvotes
simmpaul
Contributor | Diamond Partner
Contributor | Diamond Partner

Getting Custom module to align horizontally vs vertically

Hi Trifecta,

 

Are you familiar with flex containers? (https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

Flex containers allow you to manipulate their content really well, though compatability could be an issue. E.G. the align content vertically and horizontally within a container:

<style>
.container { display: flex; align-items: center; justify-content: center; }
</style>
<div class="container">
  <p>I'm centered AF!</p>
</div>

2. To access an image url, you'll use {{ widget.field_name.src }}

So if it were me, I'd do something like <div style="background-image:url('{{ widget.image_field.src }}')">.

 

There's probably a better way to achieve this, but it should do the trick!

 

Hope this helps.

 

Simon