CSS position relative div not responsive

Question

Hello i have a background which i want to add div over it like this picture im using bulma css framework i was able to achive this look by writing this code

index.html

    <div class="section newsletter">
    <figure class="image">
        <img src="src/img/newsletter.png">
    </figure>
            <div class="form">
                <h5>Keep updated with out latest news.<br>Subscribe to our newsletter</h5>
                <div class="field has-addons">
                    <div class="control">
                        <input class="input" type="text" placeholder="Enter Your Email">
                    </div>
                    <div class="control">
                        <a type="button" class="button btn-grad is-dark">
                            Subscribe
                        </a>
                    </div>
                </div>
            </div>
</div>

css

.newsletter{
padding:0px;
.form{
    display: flex;
    flex-direction: column;        
    width:588px;
    height:297px;
    background: $bg-transperant;
    box-shadow: 0px 5px 14px rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    // Layout
    position: relative;
    left: 140px;
    top: -386px;
    h5{
        padding: 50px 60px 40px 60px;
        font-weight: 600;
        font-size: 25px;
        line-height: 46px;
        color: #2F4B6E;
    }
    div{
        justify-content: center;
    }
    .input{
        height: 50px;
        width: 352px;
        box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15);
        border-bottom-left-radius: 100px;
        border-top-left-radius: 100px;
    }
}

}

the problem is that itsn't responsive in mobile or tablet
it looks like this

im using position relative to able to put the div on the top of the image how can i do it better for example to make it responsive ? also there is a large white space below the picture i don't know why

Live Project Repo https://github.com/Ov3rControl/ReachGate Live Overview: https://ov3rcontrol.github.io/ReachGate/

Kyle Holmberg · Accepted Answer · 2019-07-01T00:49:15.917

This may be 3 problems combined.

1) Ensure that you have your viewport set to responsive in the head

2) Don't use hard-coded dimensions for containers that expand beyond the smallest possible viewport. Notice your form is set to a 588px width. Try doing width: auto; and then max-width: 588px; instead.

3) Consider not hard-coding your positioning. Try something like this instead to center relatively positioned containers.

Looking really pretty though, good job! One aside: It's considered good practice to always tie a label to an input for accessibility purposes. If you don't want it visible that's fine! See this

I did the following to responsively center the form:

<!------------------------------------[NewsLetter Section - START]------------------------------------------->
    <div class="section newsletter">
        <div class="form">
            <h5>Keep updated with our latest news.<br>Subscribe to our newsletter</h5>
            <div class="field has-addons">
                <div class="control">
                    <input class="input" type="text" placeholder="Enter Your Email">
                </div>

                <div class="control">
                    <a type="button" class="button btn-grad is-dark">
                        Subscribe
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!------------------------------------[NewsLetter Section - END]------------------------------------------->

.newsletter {
  padding: 0px;
  background-image: url('src/img/newsletter.png');
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;

  .form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-height: 270px;
    max-width: 320px;
    background: $bg-transperant;
    box-shadow: 0px 5px 14px rgba(0, 0, 0, 0.15);
    border-radius: 16px;

    // Layout
    h5 {
      padding: 50px 60px 40px 60px;
      font-weight: 600;
      font-size: 25px;
      line-height: 46px;
      color: #2f4b6e;
    }

    div {
      justify-content: center;
    }

    .input {
      height: auto;
      height: 50px;
      width: 352px;
      box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.15);
      border-bottom-left-radius: 100px;
      border-top-left-radius: 100px;
    }
  }
}

Thanks very much for your answer i tried but with no luck now i tried to give the div a background image and put a another div inside it and give it margins or something but faild as well :)) — mohamed adel, Jun 30 '19 at 01:47
Can you somehow provide the context of the whole page? There must be something else higher up affecting things. — Kyle Holmberg, Jun 30 '19 at 02:46
Edited my response! Just be careful about developing a few bad habits! You have a form here which should be using the `form` element that you can submit with a `button` with `type="submit"`. Instead, you're using a div with an anchor tag to submit. Good luck! — Kyle Holmberg, Jul 01 '19 at 00:47
hello i just tried your code copy & paste and it look like this broken in desktop tablet and mobile :( http://oi65.tinypic.com/2yl9v8i.jpg — mohamed adel, Jul 01 '19 at 09:34
Sorry to see that. I didn't notice any issues on Chrome latest at any viewport. Are you using any sort of autoprefixing to manage CSS prefixes for other browsers? — Kyle Holmberg, Jul 09 '19 at 23:05

CSS position relative div not responsive

1 Answers1