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

apras77

Circle Member
  • Posts

    2
  • Joined

  • Last visited

  1. 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.
×
×
  • Create New...