Responsive design with css and html

Question

I am building a responsive form design for desktop and mobile devices. I write a following code for that and it is working fine but it generates the problem when i resize window like mobile screen width the left and right margin space is little large. I want to minimize the space of left and right margin i tried a lot but fail can some one help me please

.main_container {
  position: relative;
  width: 100%;
  border-top: 2px solid #e4e4e4;
  border-bottom: 2px solid #e4e4e4;
  overflow: hidden;
}

.main_container:after {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px 100px 0 100px;
  border-color: #007bff transparent transparent transparent;
}

.left_parent {
  float: left;
}

.left_child {
  padding-right: 2%;
  padding-left: 0%;
  text-align: center;
}

.right_child {
  padding-right: 0%;
  padding-left: 0%;
  text-align: center;
  /*width: 40%;*/
}

.right_parent {
  float: left;
}

.left_uppper_text {
  font-family: 'Open Sans', sans-serif;
  font-size: 130%;
  text-align: justify;
  margin-right: 3%;
  color: #847979;
}

.left_bottom_text {
  font-family: 'Open Sans', sans-serif;
  font-size: 81%;
  color: #bbb;
  font-weight: bold;
}

.main_child {
  margin: auto;
  padding: 0% 0% 0% 27%;
  overflow: hidden;
  margin: auto;
  width: 50%;
  /* border: 3px solid green; */
  padding: 10px;
}

.input_email {
  width: 67%;
  padding: 3% 17px;
  box-sizing: border-box;
  margin: 8px 0;
}

.input_button {
  max-width: 190px;
  min-width: 84px;
  padding: 3% 20px;
  box-sizing: border-box;
  margin: 8px 0;
  background-color: rgba(245, 0, 83, 0.73);
  color: white;
  border: none;
  border-top: 2px solid rgba(245, 0, 83, 0.73);
  border-bottom: 2px solid rgba(245, 0, 83, 0.73);
}

<div class="main_container">

  <div class="main_child">

    <div class="left_parent">

      <div class="left_child">
        <span class="left_uppper_text"> Join over 20,2000 blog subscriber </span> <br>
        <span class="left_bottom_text"> We guarantee 100% customer satisfaction</span>
      </div>

    </div>

    <div class="right_parent">

      <div class="right_child">
        <input type="text" class="input_email">
        <button class="input_button">Subscribe</button>
      </div>

    </div>

  </div>
</div>

Converted to snippet, can you better explain what you're trying to achieve? — Serg Chernata
– Serg Chernata, Commented Mar 7, 2017 at 20:00
add a media query for the screen size at which you want to reduce the margin. When the screen is that size (or smaller) the margins change. For that just declare your media query at the bottom and then redefine the element's margins. — Falk
– Falk, Commented Mar 7, 2017 at 20:01
thanks @Falk but dont have a knowledge about media query can you help me? — Darshan Jadiye
– Darshan Jadiye, Commented Mar 7, 2017 at 20:03
Sure. You can read up on the syntax and concept here: w3schools.com/cssref/css3_pr_mediaquery.asp As for what you want to do: @media screen and (max-width: 480px) { //replace 480 px with what you want. .element { margin: <new margin> } } — Falk
– Falk, Commented Mar 7, 2017 at 20:05

Hudson Taylor · Accepted Answer · 2017-03-07 20:03:45Z

1

So, you can manipulate styles at any screen size using @media queries. In your case it might look something like this:

@media (max-width: 768px /* Mobile size */) {
   /* Element you want to style at this screen size */
   .element {
      margin: 5px; /* Or whatever style you want */
   }
}

You can read more about @media queries here: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

answered Mar 7, 2017 at 20:03

Hudson Taylor

1,1722 gold badges11 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hudson Taylor Over a year ago

No problem! Good luck with your project.

Collectives™ on Stack Overflow

Responsive design with css and html

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related