Jump to content

Line break in CSS dropdown menu is not correct

Go to solution Solved by Jo_SQSP,

Recommended Posts

Site URL: https://scarlet-beagle-me6l.squarespace.com

Hi all, 

I am trying to code a dropdown menu on my site. The line break looks correct on full desktop screen, but moves to a strange place on smaller screens/mobile. 

Has anyone an idea, how I could fix this? 

This is the code I am using: 

Code for Text block (further below the custom css code): 

<div class="dropdown">
  <p2>This is question 1</p2>
  <div class="answer">
    <p>This is answer 1</p>
  </div>
</div>

<div class="dropdown">
  <p2>This is question 2</p2>
  <div class="answer">
    <p>This is answer 2</p>
  </div>
</div>

<div class="dropdown">
  <p2>This is question 3</p2>
  <div class="answer">
    <p>This is answer 3</p>
  </div>
</div>

 

This is the Custom CSS code: 

 

/* Dropdown Box */
.dropdown {
  margin-bottom: 4vw; /*spacing between boxes */
}
.dropdown p2 {
  font-size: 1.1rem; /*question font size */
  font-weight: 600; /* question bold */
  background: #FFFFFF; /*box background colour */

  color: #00000 !important; /*question text colour*/
  padding: 8px;
  margin: auto 0px;
  cursor: pointer;
}

.dropdown p {
  font-style: normal; /* answer normal */
}

.answer {
  display: none;
  margin-top: 1vw; /*space between question and answer */
}

.dropdown p2:after {
  content: "\>"; /* arrow */
  font-size: 24; /*font size arrow */
  text-align: left;
  float: left;
}

 

 

Thanks a lot. 

 

Link to comment
  • 5 months later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.