Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Line break in CSS dropdown menu is not correct


apras77

Question

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
  • Answers 1
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

1 answer to this question

Recommended Posts

  • 0

Hi,

What is access password? We can check problem easier

---

You can also use Accordions Tab Plugin 

or use this free tool to add FAQ Accordion Dropdown.

faq-dropdown1-min.thumb.png.169b54f9eee25b2ac70fb0ac2179df21.png

faq-dropdown2-min.thumb.png.a6f09cfc5360fb3bd95c5448f03be733.png

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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


×
×
  • Create New...