Nonprofit Needs Help with CSS

HTML & CSS
1

Hi. I’m trying to get our nonprofit’s new site design up this week but have hit a little snag with (I think) some CSS.

We have a quiz that’s responsive. Everything about it re-sizes nicely except the ‘NEXT’ and ‘PREVIOUS’ buttons. They don’t move and end up overlapping the answers.

Like I said, I think it’s a CSS issue but I’m not sure. Any help would be so appreciated.

Here’s the link: Dog Brains Trivia

Thank you!

2

Hi SpottyDawg, welcome to the forum

I have a feeling position: absolute is the main culprit.

But until the HTML is valid there’s no way to know for sure.

You have a start p tag, div tags, script tags, then the closing p tag.

Both p and div tags are block level, and it could be the browser(s) “fix” this by adding the missing p tag before the starting div tag. But they aren’t smart enough to add an opening p tag before the closing p tag.

Try removing those (the pair of p tags) to see if it helps

             <p><div id="quiz-container"></div>
	 <script>
 
 $('#quiz-container').jquizzy({
			questions: init.questions, 
			resultComments: init.resultComments,
		});
 </script><p>
        </div>
3

Hi and thanks. The p tags were an error, but did not change the issue once I corrected them. I appreciate you having a look.

4

Two easy options are:

  1. Don’t position them absolutely, as you can simply place them under the questions statically and they will move with the rest of the content.
  2. If you really want to use positioning, then a better approach is to add bottom padding to the quiz container and then position the buttons down in that padding area, which will ensure that they never overlap anything else.
5

And I think you may want media queries too.

1008×403 966 KB

6

Hi and thank you. I did change the positioning to static and two things happened that I didn’t know how to correct:

  1. The (Next / Previous) buttons ran the whole width of the quiz (like the answer buttons).
  2. They were stacked on top of each other - even though I tried to add margins.

I like your second suggestion best but I have no idea how to code it. The quiz script was found on the Internet and I’ve done my best to customize it. This is my last hang-up and I’m pretty lost.

:(sob:

7

WOW! How did you do that, Mittineague? And, please tell me what media queries are?

8

I’m a bit of a CSS “hack” and I’m sure others will offer more robust changes, all I did was

div.prev 
removed `bottom: 75px;` 
changed `left:55px;` to `left: 2em;` 

div.next 
removed `bottom: 75px; 
changed `right:55px;` to `right: 2em;`

The “px to em” is because px seemed like a “magic number” and I try to avoid those.
(except for known dimension images and border thickness - but not positioning)

media queries are when the HTML has

<meta name="viewport" content="width=device-width,initial-scale=1">

and the CSS has something like

@media only screen and (max-width: 450px) {
  .main, aside, section {
    display: block;
    font-size: 1rem;
  }
  nav.desktop {
    display: none;
  }
⋮

where “450px” is a width where things start to break (eg. the overlap)

9

Well, it is better but I really need the buttons to move / line-up like the answers do. Because even though they move, they still overlap.

The media queries didn’t help, either. That is, if they were supposed to.

I appreciate what you’ve done. Thanks so much.

10

I’m not seeing an overlap of the previous and next buttons unless you mean at narrow widths?

If so you will first need the meta viewport (see post #8) tag in place if you want the site to adapt to mobile correctly and then add this media query.

@media screen and (max-width:380px){
.main-quiz-holder .slide-container .next,
.main-quiz-holder .slide-container .prev{
position:static;
display:block;
margin:0 0 10px;
}
.main-quiz-holder .slide-container .next{text-align:right}
}
11

Removing or reducing the side margins on .detail in the small screen query should do it.

12

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.