Inspiring

Answered

Weird broken H2 header

Forum|Forum|6 years ago
May 5, 2019
2 replies
588 views

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

This topic has been closed for replies.

Correct answer KayteinLA

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

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

John Waller

Community Expert

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.

Nancy OShea

Community Expert

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.

Nancy O'Shea— Product User & Community Expert

KayteinLAAuthor

Inspiring

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

Nancy OShea

Community Expert

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— Product User & Community Expert

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded