[Support request] Buttons equally width and more spacing around them

Home Forums Support [Support request] Buttons equally width and more spacing around them

Home Forums Support Buttons equally width and more spacing around them

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #2072228
    Henk

    Hi,

    On the frontpage I’m using an Element with the following code:

    <div class="frontpage-hero-contents">
    	<h1 class="frontpage-hero-title">name of companyt</h1>
    	<a href="#contactformulier">send us a message</a>
    	<a href="+999999999">Call us: 9999-9999-999</a>
    </div>

    I have the following questions:
    * how can I make the two buttons have an equal width?
    * how can I add more space between the buttons? I can adjust the margins of the button but I needs to work also in responsive mode.
    * how can I increase the space between the H1 and the buttons as a group?

    h1.plaats-hero-title {
    	color: white;
    	margin-left: auto; 
    	margin-right: auto;
    	width:75%;
    	text-shadow: 0 0px 2px #fff;
    	opacity: 0.9; /* font more blended with background*/
    }
    
    @media (max-width: 767px) {
    
    	h1.frontpage-hero-title {
    	font-size: 25px;
    	color: white;
    	margin-left: auto; 
    	margin-right: auto;
    	width:95%;
    	text-shadow: 0 0px 1px #fff;
    	opacity: 0.9; /* font more blended with background*/
    	}
    }
    
    .CTA-knop,
    .CTA-knop:visited {
    	display: inline-flex;
      align-items: center;
      justify-content: center;
    	font-size: 1em;
    	background-color: #fe7f2d;
      color: white;
    	margin-bottom: 10px;
      border-radius: 8px;
    	box-shadow: 0 3px 5px rgba(0, 0, 0, 0.18);
    	padding: 20px 30px 20px 30px;
    	padding: 0.25em 0.75em;
      min-width: 10ch;
      min-height: 44px;
    	text-align: center;
      line-height: 1.1;
    	border: 2px solid #cd7213; 
    	transition: 220ms all ease-in-out;
    	user-select: none; /* text cannot be selected by user */
      -webkit-user-select: none;
    	touch-action: manipulation; /*  avoid page zoom on mobile phone on double tapping */
    }

    Thanks, Henk.

    #2072313
    David
    Staff
    Customer Support

    Hi there,

    first thing would be to add a wrapper to your buttons HTML eg.

    <div class="frontpage-hero-contents">
        <h1 class="frontpage-hero-title">name of companyt</h1>
        <div class="frontpage-hero-buttons">
            <a href="#contactformulier">send us a message</a>
            <a href="+999999999">Call us: 9999-9999-999</a>
        </div>
    </div>

    Once thats in place we can look at the CSS to make those changes you require.

    #2072517
    Henk

    Hi David,

    I added the

    , that was the easy part.

    How can I make the two buttons have an equal width?
    Both on desktop and responsive mode?

    How can I add more space between the buttons?
    I specified it now with the left and right margins of the buttons with 10px. But what happens when they are stacked in responsive mode? Do I get than the right behavior or is there a best-practice?

    * how can I increase the space between the H1 and the buttons as a group?
    I solved this by using the following CSS:

    .frontpage-hero-buttons {
    	display: block;
    	margin-top: 50px;
    	margin-bottom: 50px;
    	}
    #2072546
    David
    Staff
    Customer Support

    I would use this CSS to make the -hero-buttons a flex container that remains centred and has a max-width:

    .frontpage-hero-buttons {
        display: flex;
        justify-content: center;
        max-width: 700px;
        margin: 50px auto;
    }

    And then we add some left/right margin to our buttons and discount those margins from our flex-basis:

    .frontpage-hero-buttons .CTA-knop {
        margin: 0 20px;
        flex: 1 0 calc( 50% - 40px );
    }

    This property: flex: 1 0 calc( 50% - 40px ); tells the buttons they can 1 grow to fill available space, but should not 0 shrink and ideally we want the basis to fill 50% of the flex wrapper minus the 40px of horizontal margins we added.

    #2072552
    Henk

    Thanks David.
    And especially for your explanation, I’m going to study that so I understand it.

    #2072556
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.