How to make a header box responsiveAsk Questions

 Posted on 22/08/2018 10:59:10 AM

I've used the below code to add a box around a header title, however is there any way to make this responsive to fit the header text? At the moment all boxes are the size set and when scaled down to mobile go off screen, thanks for any help in advance

.box.active .header-title p {
    width: 600px;
    height: 120px;
    padding: 15px;
    border: 0px solid white;
    padding-bottom: 15px;
    background: rgba(80, 80, 80, 0.4);
    opacity: 1;
  color: white

}

Share On: facebook gplus twitter
profile
Asked by Kunal Patel on 22/08/2018 10:59:10 AM Score: 91 points
Add Comment:
Submit

Comments

1 Answer

1 Corrected Answers
Aproved Answers
1
Profile
Answered by Hardik Chaudhary on Sep 6 2018 7:54AM Score: 375 points

Why don't you just put border around the text? No need bind text with fixed height and width. This will not make text responsive. Try this code.

.box.active .header-title p {
    padding: 15px;
    border: 1px solid #000;
}

Remove extra css.

Add Comment:

Post Your Answer

  •  
  •  

Existing Members

Sign in to your account
Email Address
Password
...or Join us
Download, Vote, Comment, Publish.
Full Name
Email Address
I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the StoodQ newsletters
Guideline to answer a question:

Useful tips to submit your answer
Please read below guidelines before you submit your answer for question.

  • Read and understand question for which you are submitting your answer.
  • Try to avoid grammatical and spell mistake while answering.
  • Do not post any irrelevant information in your answer.
  • Explain your answer with example or any reference link to help who posted question.
  • If you find irrelevant question, please report it to support. Click here to contact support.
  • You agree to the privacy policy and terms of use to submit any contents.

Note: StoodQ is online developers community which helps developer for their difficulty, lets help them with your value contribution.