Supporting part got overlapped in smaller screen


#1

https://www.codecademy.com/courses/web-ext/projects/html-css-prj_broadway?user_id=527a4a4af10c607f7d001177

I've done everything and it looks fine from full screen.
When it is shown on smaller screen, supporting part got overlapped as below.

I have to learn how to deal with bootstrap to make it not overlap?
Is it something ahead of my curriculum?

Here is my CSS. I tried sth like this but I couldn't figure out.

display: inline-block
clear: both
float: left


.btn-default {
  border: 1px solid #333;
  font-family: 'Raleway', sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 1.3px;
  padding: 16px 20px;
  text-decoration: none;
  text-transform: uppercase;
  color: black;
}

.supporting {
  padding-top: 80px;
  padding-bottom: 100px;
  display: inline-block;
}

.supporting .col {
  float: left;
  width: 33%;
  font-family: 'Raleway', sans-serif;
  text-align: center;
  
}

.supporting img {
  height: 40px;
}

.supporting h2 {
  font-size: 23px;
  text-transform: uppercase;
}

.supporting p {
  font-size: 14px;
  line-height: 30px;
  padding: 0 50px;
  margin-bottom: 40px;
}

Thank you in advance :wink:


#2

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.