Problem appearing h3 on a new line despite using ``` display: block; ```

HTML-CSS
1

I want my h3 to display “Why Value Add Boutiques?” on another line. Rather than being on the same line with “Follow us on whatsapp”. I’ve used

display: block

and

display: inline

but it’s not working. Pls any help will be GREATLY appreciated. Thank you very much and happy coding! Here’s my pen. Just scroll down to see.

2

I’ve not understood your requirement properly. Did you want to achieve this :arrow_down:

image
image1796×187 17.4 KB

I’ve done this with

.whatsapp{
    display: block;
    margin: 0 40%;
}

and width: 100% to the h1 element

3

You have a lot of syntax errors in your HTML (you can check them with the dropdown button in the upper right corner of the HTML panel and codepen will highlight them for you). This might cause weird behaviour of the CSS, especially with missing closing tags.
Also, in codepen you can’t put your whole HTML inside the HTML panel. You only put there what’s inside the <body> tag. If you want to add external scripts or other stuff that belongs in the <head>, you do that by clicking on the little cogwheel in the upper left corner.

4

Sorry, I put all the scripts there 'cause I didn’t want to forget them when uploading to github. And concerning the html. I saw the errors and it display this "Tag must be paired, no start tag: hr" Pls what does it mean

Screenshot of problem
Screenshot of problem1366×538 124 KB
? And also it shows there’s a problem with my a tag. Saying not properly matched. Pls can you explain all these things?

5

remove </hr> directly, it is a self closing tag, you can’t have a closing tag for that. See here: https://www.w3schools.com/tags/tag_hr.asp

6

Thanks, but pls look at this error. All my a tags are closed but it’s still throwing this.

Screenshot 2
Screenshot 21366×573 127 KB

7

inside the b there is an opening a tag with no closing tag

1 Like
8

Thank you very much sincerely. No error!

9

The code isn’t working as I expected. Pls help me implement the code and save it. Then I’ll see whether it’s nice. I want the whatsapp to still be on one line even after reducing the browser’s width. Thanks

10

Just use media queries for smaller screens…
remove the margin and increase width to 100%…
Play around with margin, padding and width to customize for different screen sizes.

1 Like