CMS Development

HBarden
Participant

Theme CTA Box Module Edit

Hi,

 

I was wondering if someone can help me slightly edit a module. I would like for this CTA box module to have the text on top and CTA button below as it is squashed together in the current format. I'm not sure how I change this within the coding. Can anyone help?

 

MicrosoftTeams-image.png

0 Upvotes
5 Replies 5
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Theme CTA Box Module Edit

Hi @HBarden

could you please provide a link to the page where this module is used or the source code of the module which is located in the design-tools?

 

Thank you

 

best, 

Anton

Anton Bujanowski Signature
0 Upvotes
HBarden
Participant

Theme CTA Box Module Edit

Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Theme CTA Box Module Edit

Hi, 
open the module in the design-tools and search for 

@media (min-width: 800px){
.cta-box {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

and add "flex-direction: column" so the code looks like this:

@media (min-width: 800px){
.cta-box {
    align-items: center;
    display: flex;
    justify-content: space-between;
    flex-direction: column; 
}

 

best, 

Anton

Anton Bujanowski Signature
0 Upvotes
HBarden
Participant

Theme CTA Box Module Edit

Hi,

 

Thank you. I cloned the module and did this as I would still like a module where it goes to the side, however it seems to have changed both modules?

0 Upvotes
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

Theme CTA Box Module Edit

Yes, because they both use the same class and therefore it will affect both modules. 

If you want to seperate them you have to modify the code like this

 

HTML+Hubl:

search for

<div id={{name}} class="lazy module-wrapper text--center cta-box">
...
</div>

and modify it like this

<div id={{name}} class="lazy module-wrapper text--center cta-box vertical">
...
</div>

 

in module.css area search for the part you've already modified and change it like this

@media (min-width: 800px){
.cta-box.vertical {
    align-items: center;
    display: flex;
    justify-content: space-between;
    flex-direction: column; 
}

 

best, 

Anton

Anton Bujanowski Signature
0 Upvotes