CODEWITHSUNDEEP
htmlcss
Joneskvist
Joneskvist

Reputation: 137

How to change width of object in mobile version

I have a div class called form-groupBlogg

It is a form in which I want to adjust the width of it in both ordinary computer and mobile version. I have written the following CSS:

.form-groupBlogg{
  width:74%;
  margin-top:20px;
  }

@media screen and (max-width: 768px)  {
  .form-groupBlogg {
   width: 80%;
  }
}

Only problem is that the @media screen and (max-width: 768px)-part wont adjust the width of the div class in the mobile version. The first part with the width: 74% works correctly. How can I adjust the width in the mobile version?

Upvotes: 0

Views: 663

Answers (1)

Preben
Preben

Reputation: 1287

NEW answer: I guess you just want a wider form on the small screens.

Your site is adjusted in a wrapper, so the width:80% is small on a small screen. Try to adjust the width of the form-groulBlogg and form-group to 100% on the smallest screens. Looks better in my tests.

Try:

@media screen and (max-width: 500px)  {
    .form-groupBlogg {width: 100%;}
    .form-group {width:100%;}
}

Upvotes: 2

Related Questions