CODEWITHSUNDEEP
htmlcssslider
juliachen
juliachen

Reputation: 13

How do I align text and buttons on the same line?

When the screen width is less than 479px, I want the text to be under the slider. Right now when I resize my browser to < 479px, one of the text div is on top of the slider and the other is on the bottom.

Here's the testing link: http://chemistry2014.tw/

What I want it to look like:

enter image description here

Upvotes: 0

Views: 612

Answers (1)

Kevin Lynch
Kevin Lynch

Reputation: 24723

This is due to the way you have set your html. If you have the option of changing the html markup, the best solution is to relocate the div and put it after the slider form. The alternative would be to absolute position the element with a top margin, at the correct screen size.

Example CSS:

@media only screen and (max-width: 479px)
   .D-answer {
      margin-top: 40px;
      position: absolute;
      // rest of CSS code

Edited

@media only screen and (max-width: 767px) {
    .container{ width: 300px; }  <----------------- add this
    h4 {text-align:center; margin-left:0px;}
    .D-answer {margin-left:0px;}
    .A-answer {margin-right:0px;}
}

Upvotes: 2

Related Questions