B
B
bpGusar2018-01-31 14:40:12
css
bpGusar, 2018-01-31 14:40:12

How to manipulate flex properly so that it turns out like on the screen?

5a71aac45abb9582310452.png
Page merkury-vd.ru/contacts
Here on the screen is a block where I had an email and a phone number in each line on the same level, I have already broken my head how to align them.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Alexander, 2018-01-31
@tmshchk

Set the card container to:

.card {
  display: flex;
  flex-direction: column;
}

You can implement the phone number and mail address with p or a. And the indents on the left / right / top through the classes that you assign to the elements with the phone and mail.
Or show an example of your code in which it doesn’t work - it will be easier to help.

A
Ankhena, 2018-01-31
@Ankhena

Something like this: https://jsfiddle.net/ucu5hkj5/ if it's flex.
If the e-mail does not fit on one line, then the designer's idea will crumble, but this is the designer's problem. Or crop it with text-overflow. Or change the font size of the e-mail'a, so that it always fits into 1 line, then you can get rid of the min-height, but js will be added.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question