003-contact page how to fix svg icon size and center 3 flexbox containers

HTML & CSS
1

  1. I have 3 svg icons on a contact page. Phone and work hours icons look ok but the address svg has oval shape. I did look into svg structure of al three and the address svg has a different structure. I didn’t want to mess with svg itself as I am very far from being svg expert lol. I was wondering if we can fix the address one with CSS?

  2. At (max-width: 1450px) media query contact form, address, phone, hours just go display:block. How do I center the address, phone, hours keeping same gap between svg and text (text-align left)?

Please see https://test.prygara.com/contact/

flex-center-address-phone-hours
flex-center-address-phone-hours1557×1043 120 KB

2

You don’t really have the right structure to do this automatically so you will have to use a magic number.

e.g.


.inner2 svg{height:35px}

@media screen and (max-width:1450px){
    
    .contact .inner-2 .info{
        display:flex;
        max-width:250px;
    }
}
4

Yes. I used current structure to keep those 2 green horizontal lines full width under h1 at(max-width: 1450px) media query. What structure would you recommend considering I want to keep those 2 lines?

5

Wrap the info items in a parent div and then use flex. Use the column value so they are vertical and justify them to the centre.

6

this works. thanks.

1 Like
7

There’s a small issue on Chrome iPhone-its not happening on Safari or Firefox iPhone.

See the address section. Initially the word “Office” stays in its place - next to 195 but when you continue scrolling it pops up… I have a screen recording in mp4 but Sitepoint doesn’t allow that file type to upload.

contact-page-chrome-issue-on-iphone
contact-page-chrome-issue-on-iphone828×1792 140 KB
.

When I tested via Chrome desktop mobile view - its not showing that issue.

8

I believe that’s because chrome is turning that address into a link to google maps and breaking the layout structure by adding a link in the middle of that code.

You could avoid that by making the whole think a link to start with anyway to stop chrome adding an inner link (because nested links are invalid) and then just remove the underline and pointer events so no one knows its a link.

e.g.

<a href="#" class="info address">
              <svg class="sg" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 353.89 449.4" style="enable-background:new 0 0 353.89 449.4;" xml:space="preserve">
                <g>
                  <defs>
                    <rect id="SVGID_1_" width="353.89" height="449.4"></rect>
                  </defs>
                  <clipPath id="SVGID_2_">
                    <use xlink:href="#SVGID_1_" style="overflow:visible;"></use>
                  </clipPath>
                  <path class="st0" d="M176.42,449.4c-3.66-0.02-6.98-2.15-8.49-5.46l-4.22-9.24c-10.24-22.21-19.85-43-28.72-64.07
            c-7.07-16.68-16.41-26.41-32.23-33.58C27.72,303.01-13,221.93,3.73,139.91C19.43,62.58,90.93,2.45,170.03,0.07L175.58,0h0.14
            c81.39,0,150.55,52.76,172.06,131.3c22.61,82.65-19.27,171.27-97.44,206.1c-16.28,7.28-26.04,17.17-32.6,33.13
            c-8.4,20.37-17.69,40.56-27.51,61.9l-5.34,11.53C183.4,447.28,180.06,449.4,176.42,449.4L176.42,449.4z M176.7,121.24h-0.09
            c-29.94,0-55.28,25.55-55.3,55.79c-0.02,14.75,5.67,28.6,16.05,39.04c10.5,10.48,24.57,16.26,39.5,16.26
            c15.49-0.12,29.26-5.81,39.72-16.45c10.27-10.52,15.82-24.66,15.56-39.76c-0.42-29.91-25.06-54.53-54.93-54.88
            C177.07,121.24,176.89,121.24,176.7,121.24z"></path>
                </g>
              </svg>
              <p>Office 195 Barrington Ave.<span>East York, ON, M4C 5M7</span></p>
            </a><!-- .address -->

a.info.address {
  text-decoration: none;
  pointer-events: none;
}

Or supply a real href link to a suitable google map if you want that behaviour.

I believe you can also disable that behaviour by a meta tag.

<meta name="format-detection" content="telephone=no, address=no">

9

I used this option. It works. Thanks.

1 Like
10

I was just wondering if grid would be a better option in
.contact main > section if I wanted to line up contact form, address, phone, service area so that bottom of service area is lined up with submit button and theres more space between h1, address and service area blocks. However I am not sure how to optimize for mobile if I use grid.

grid vs flex
grid vs flex1267×701 31.7 KB
.

11

You can do that quite easily like this:

@media screen and (min-width: 1451px) {
  .inner-2 {
    display: flex;
    flex-direction: column;
  }
  .area {
    margin-top: auto;
  }
}
1 Like
12

I just noticed the phone clickable area is too wide as .inner-2 .info gives it a width 65%. how can I reduce the phone link width and keep the same layout ?

13

I think .area margin-top: auto; makes the gap too big. I guess if I want to line up with submit button I have to make some other adjustments like margin or padding on h1, .info and .area divs?

14

No margin-top pushes the whole area block to the bottom of the flex container to match the height of the inner-1 flex-container. If you have padding and margins on one and not the other then the bottoms of the text content won’t be exactly the same. However if you added a green background to inner-1 and a blue background to inner-2 you would see that they are now exactly the same height.

If you want to match the bottom of the actual content you would need to remove all bottom margins and bottom padding on the wrappers and the elements at the bottom. However an easier solution would be just to add a bit of padding bottom to .area until its where you want.

e.g.


@media screen and (min-width: 1451px) {
  .inner-2 {
    display: flex;
    flex-direction: column;
  }
  .area {
    margin-top: auto;
   padding-bottom:1rem;/* adjust to suit*/
  }
}
1 Like
15

You could mess about with a load of css but you’d also have to do media queries for smaller sections so it would be better to structure the html better and wrap a div around the anchor so that the anchor is no longer a full width item.

e.g.

<div class="info tel">
  <a href="tel:1-647-614-3782">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 384 384" style="enable-background:new 0 0 384 384;" xml:space="preserve">
      <g>
        <defs>
          <rect id="SVGID_1_" width="384" height="384"></rect>
        </defs>
        <clipPath id="SVGID_2_">
          <use xlink:href="#SVGID_1_" style="overflow:visible;"></use>
        </clipPath>
        <path d="M353.19,252.05c-23.51,0-46.59-3.68-68.47-10.9c-10.72-3.66-23.9-0.3-30.44,6.42
                l-43.18,32.59c-50.07-26.73-80.92-57.56-107.28-107.26l31.64-42.05c8.22-8.21,11.17-20.2,7.63-31.45
                c-7.26-21.99-10.95-45.06-10.95-68.58C132.15,13.82,118.32,0,101.33,0H30.81C13.82,0,0,13.82,0,30.81
                C0,225.56,158.44,384,353.19,384c16.99,0,30.81-13.82,30.81-30.81v-70.32C384,265.87,370.18,252.05,353.19,252.05"></path>
      </g>
    </svg>
    <p>647-614-3782</p>
  </a>
</div>

Then add this new css:

.inner-2 .info.tel a {
    display:flex;
    align-items:center;
    column-gap:1rem
}
1 Like
16

You are right. Good fix.

1 Like
17

Thanks.I didn’t know about this workaround.

1 Like
18

I think even without media queries both inner-1 and inner-2 divs are of same height. I guess thats because they are both flex childeren of .contact main > section { display: flex; max-width: 1280px; Based on max-width the height is auto calculated. Is it?

19

Flex items are naturally the same height as each other in the same row unless you change their alignment. That’s basically what it was designed for :}

1 Like