Assessment wanted for backgrounds and borders 2

MDN
#1

task goal:
Make sure that the heading text does not overlay the image, and that it is centered — you will need to use techniques learned in previous lessons to achieve this.
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Test_your_skills_backgrounds_and_borders

my answer:

12
12771×257 13.1 KB

CSS:

 .box {
         border:5px lightblue solid;
         border-top-left-radius: 20px;
         border-bottom-right-radius: 20px;
         padding: 10px 20px;   
    }

    h2 {
         background-image: url(star.png),url(star.png);
         background-position: left, right;
         background-repeat: no-repeat, repeat-y;
         text-align:center;
         padding: 5px 20px;     
    }

HTML:

   <div class="box">
      <h2>Backgrounds & Borders</h2>
    </div>

my text is always overlapping with the star. and i don’t know how to solve it.

#2

now I see the formal answer on the github

.box {
  border: 5px solid lightblue;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 40px;
}

h2 {
  padding: 0 40px;
  text-align: center;
  background: url(star.png) no-repeat left center,
    url(star.png) repeat-y right center;
}

the main difference is the padding values:

padding: 0 40px;

BUT this is what I saw on my computer when I just applied the formal answer.

13
13839×728 40.3 KB

:sob: :sob: :sob: :sob: :sob: :sob:

#3

Hi @Austin_Hart

When I copy/paste the solution code on Firefox and Chrome, I get the correct answer. On your screenshot it looks like the width of the box is wrong. Did you test some changes in the DevTools and forgot to remove them? Could you please reload the page without cache (CTRL+SHIFT+R) and copy/paste the code again? Which browser and OS are you using?

Have a nice weekend,
Michael

#4

I did what you asked but it remains the same
my os is win10 and my browser is chrome
:sob:

#5

Hello @Austin_Hart

could you create new browser profile and try again if it work then either the issue

  1. with one of your extensions disable all of them then re enable one by one till you get the one causing the issue

  2. issue with cache clear your browser cache try to use longer time period

  3. issue in the profile not sure how to fix this

if that not the cause could you right click the box then inspect and check what the width of the box and the h2 element the browser report
what is your screen size and resolutions

and have a nice day :slight_smile:

#6

This is my solution and works:

CSS:

.box {
border: 5px solid lightblue;
border-top-left-radius: 20px;
border-bottom-right-radius: 40px;
}

h2 {
background-image: url(star.png),url(star.png);
background-repeat: no-repeat, repeat-y;
background-position: left, right;
text-align:center;
padding-left:30px;
padding-right: 30px;

}