Highlighted

Weird broken H2 header

Community Beginner ,
May 05, 2019

Copy link to clipboard

Copied

I had this page working, and then suddenly in the middle of the page, the h2 header is broken in a really weird way and is interacting strangely with the photo above. I can't find anything in the CSS or my source code to explain it.

The first issue is that the title itself breaks into 2 broken lines at 1200px screenwidth and above, even though there's plenty of room for it.

From 992 to 1200px the image from the above paragraph, which is in a separate <div> and <p> section, jumps down on top of the h2 heading.

A 3rd issue is that the margin above and below the h2 header doesn't work at those wider widths either. I've searched through all the @media attributes for different screen sizes in the bootstrap CSS, but couldn't see anything obvious that would trigger this behavior.

Any ideas? Screen shots below.

Kayte

DreamweaverH2issue1.jpg

DreamweaverH2issue2.jpg

Correct answer by KayteinLA | Community Beginner

I was able to solve the problem by inserting additional rows/columns splitting the top and bottom content within the main column. I don't know why it fixed the problem, but it did, so I can move on.

Kayte

Views

98

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Weird broken H2 header

Community Beginner ,
May 05, 2019

Copy link to clipboard

Copied

I had this page working, and then suddenly in the middle of the page, the h2 header is broken in a really weird way and is interacting strangely with the photo above. I can't find anything in the CSS or my source code to explain it.

The first issue is that the title itself breaks into 2 broken lines at 1200px screenwidth and above, even though there's plenty of room for it.

From 992 to 1200px the image from the above paragraph, which is in a separate <div> and <p> section, jumps down on top of the h2 heading.

A 3rd issue is that the margin above and below the h2 header doesn't work at those wider widths either. I've searched through all the @media attributes for different screen sizes in the bootstrap CSS, but couldn't see anything obvious that would trigger this behavior.

Any ideas? Screen shots below.

Kayte

DreamweaverH2issue1.jpg

DreamweaverH2issue2.jpg

Correct answer by KayteinLA | Community Beginner

I was able to solve the problem by inserting additional rows/columns splitting the top and bottom content within the main column. I don't know why it fixed the problem, but it did, so I can move on.

Kayte

Views

99

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 05, 2019 0
Adobe Community Professional ,
May 05, 2019

Copy link to clipboard

Copied

Sreenshots of code are impossible for us to read.  We need  the actual code.  A link to the problem page online is the quickest way for us to help you.  A distant 2nd option is to copy & paste all code into a web forum reply.  But don't use e-mail, it won't come through.

Meanwhile, validate your HTML code and fix reported errors.   If your <h2> stopped working as expected, it's most likely a code error.

CC-BugReport.jpg

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 05, 2019 1
Community Beginner ,
May 06, 2019

Copy link to clipboard

Copied

Thanks, Nancy and John,

I changed the width:"100% in the CSS to background-size:100%. That didn't change anything.

I ran the source code of the page and the template through the validator and it's not finding anything except that it doesn't like my <div> codes forcing my body and footer to be max 1300px - but they work. If I take that off it doesn't change the H2 problem, just messes up my footer.

The H3 settings are the same as H2 except for color.The H2 and H3 work fine on every other page made with the template, whether the title is short or long. I  tried assigning H6 the same attributes and using that, but got the same results.

When I change it to H4, the text is fine.

I tried paring the H2 code in the CSS down to just what I have for the H4 code plus the background color and border, but it didn't make any difference - so maybe there's something weird in those two attributes that I added from the CSS Designer.

Here are the files for the page Index2019.html, the template it was made from, and the 2 style sheets attached.

https://drive.google.com/open?id=18KL4_QuhOZmcC8yKCwm4T2jmeNTiPVh-

It's so perplexing that it works fine on every other page from that template. I may just have to redesign that one element to move forward if I don't find a solution soon.

Thanks for any ideas,

Kayte

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 06, 2019 0
Adobe Community Professional ,
May 06, 2019

Copy link to clipboard

Copied

Upload your work to your remote server and post the URL.  I'm not interested in downloading anybody's work files.  Sorry.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 06, 2019 0
Community Beginner ,
May 06, 2019

Copy link to clipboard

Copied

I was able to solve the problem by inserting additional rows/columns splitting the top and bottom content within the main column. I don't know why it fixed the problem, but it did, so I can move on.

Kayte

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 06, 2019 0
Community Beginner ,
May 06, 2019

Copy link to clipboard

Copied

Sorry, Nancy, I thought that's what you were asking for.

Kayte

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 06, 2019 0
Adobe Community Professional ,
May 05, 2019

Copy link to clipboard

Copied

To start with, you've got a syntax error on line 79 in your CSS:

Should be width: 100%; Fix that and see what else needs addressing.

As Nancy says, almost all these issues boil down to code errors and the easiest way to diagnose is to give us a link to the site online. If it's not yet published, get in the habit of putting it online early at a test (private) URL and test often in several browsers and mobile devices after each significant edit.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 05, 2019 1