How to make a header box responsiveAsk Questions
css

 Posted on 08/22/2018

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 on 08/22/2018 Score: 89 points
Add Comment:

Comments

1 Answers

1 Corrected Answers
Aproved Answers
1
Profile
Answered by hardik chaudhary on 9/6/2018 7:54:26 AM Score: 454 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.

Comments

Add Comment:

Post Your Answers

Existing Members

Sign in to your account
Email Address
Password
New Member?
Sign up and complete profile
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.