Guys, who knows what the problem is, how to make it so that "hearing and speech" are not pressed to the picture?

Guys, who knows what the problem is, how to make it so that "hearing and speech" are not pressed to the picture?

Now so Now so

  • Lor
  • Audiologist
  • Deaf-pedagogue
  • Speech therapist
  • Neurologist
  • Hearing aid
  • Rehabilitation for patients with hearing and speech impairment
  • Ophthalmologist
  • Physiotherapy
  • Massage

.med-wrap img float: left width: 200px max-width: 90% ul list-style-type: none padding-top: 0px li font-size: 16px a color: #535353 margin-left: 27px .fa color: $grc margin-right: 8px

2 answers 2

  1. There may be a block width if the page is divided into them.
  2. Positioning is possible.
  3. add a space from the image (to move the list back)

and edit the message by adding styles here, without them it will not work out.

I add .. never put for img width: 200px, this property should be at the block or element in which img is directly stored. The properties for img should always be:

 width:100%; max-width:100%;(или сколько там нужно)
  • Added styles, look please :) - YourDeveloper
  • @YourDeveloper you didn’t add them completely, where all those classes that have styles are set ... - Vladyslav Tereshyn
  • the situation has changed a bit, but how is it now to “break” the “violation ...” so that it is clearly below the text? - YourDeveloper
  • Make this green line a pseudo-element. Because the "violation" is transferred to the next line, and becomes its beginning. And the top of the lines starts with the list item, and only then the text itself goes. - Vladyslav Tereshyn
  • And so that the lines do not fly away, you need to deal with positioning - Vladyslav Tereshyn

Give the parent block containing blocks with a picture and a display list: flex;

 #parent{display:flex} <div id="parent"> <div><img ... /></div> <div><ul> ...</ul></div> </div>