popup responsive alleen text niet

[bybryan]

Beste mede Tweaker

ik zit met een probleem omtrent mijn design.

Ik heb een button op mijn website wanneer men daar op klikt opent zich een popup met een tekst uitleg.
Alleen krijg ik het wel voor elkaar om de popup responsive te krijgen. maar alleen als ik het scherm kleiner maak centreert de popup wel maar de tekst komt lelijk onder elkaar te staan. weet iemand wat ik kan veranderen om de tekst juist mooi in beeld te krijgen.

hieronder de css

Cascading Stylesheet:

.popup-trigger:hover {
    opacity: .8;
}

.popup {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 1000;
    width: 100%;
    background-color: rgba(94, 110, 141, 0.9);
    opacity: 0;
    visibility: hidden;
    transition: 500ms all;

}

.popup.is-visible {
    opacity: 1;
    visibility: visible;
    transition: 1s all;
}

.popup-container {
    transform: translateY(-50%);
    transition: 500ms all;
    position: relative;
    width: 40%;
    margin: 2em auto;
    top: 5%;
    padding: 5rem;
    background: rgb(255, 255, 255);
    border-radius: .25em .25em .4em .4em;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.is-visible .popup-container {
    transform: translateY(0);
    transition: 500ms all;
}

.popup-container .popup-close {
    position: absolute;
    top: 8px;
    font-size: 0;
    right: 8px;
    width: 30px;
    height: 30px;
}


.popup-container .popup-close::before,
.popup-container .popup-close::after {
    content: '';
    position: absolute;
    top: 12px;
    width: 14px;
    height: 3px;
    background-color: #8f9cb5;
}

.popup-container .popup-close::before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    left: 8px;
}

.popup-container .popup-close::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    right: 8px;
}


.popup-container .popup-close:hover:before,
.popup-container .popup-close:hover:after {
    background-color: #35a785;
    transition: 300ms all;
}

heeft iemand mischien een tip of een oplossing voor mij


vriendelijke groet Bryan

[Voor 0% gewijzigd door RobIII op 09-02-2021 22:35. Reden: Code tags toegevoegd]

[OverloadOfRed]

Kijk eens naar de aanroep van je popup.
Met een beetje CSS over de schutting gooien ga je hier de oplossing niet krijgen..

[Mr. HTTP]

OverloadOfRed schreef op dinsdag 9 februari 2021 @ 19:25:
Kijk eens naar de aanroep van je popup.
Met een beetje CSS over de schutting gooien ga je hier de oplossing niet krijgen..

En je code in een

code:

[code][/code]

tag doen aub! Ook je HTML toevoegen aangezien je bezig bent met position: fixed, absolute (misschien niet op de juiste block elementen) etc.... Hoeveel browsers heb je getest...?
Werkt het zonder pop-up wel? (in hoeverre is de pop dus relevant?)

De code lijkt erg 2008-achtig, met de flexbox functies in CSS kan positionering tegenwoordig een stuk makkelijker.

wat ik kan veranderen om de tekst juist mooi in beeld te krijgen

Wat is mooi? Bedoel je horizontaal en verticaal centreren?

[Voor 31% gewijzigd door Mr. HTTP op 09-02-2021 19:35]

[bybryan]

excuses voor het ongemak hierbij op de juiste manier.

ik heb het getest onder microsoft edge en chrome en chrome voor ontwikkelaars

hieronder de html en de css

hierbij de html en css nogmaals.

code:

.popup-trigger {
    display: block;
    width: 170px;
    right: 2rem;
    margin: 3em auto;
    text-align: center;
    color: #FFF;
    font-size: 18px;
    padding: 1rem 2rem;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 50em;
    background: #0d0f0f;
    box-shadow: 0 3px 0 rgba(0, 0, 0, 0.07);
    transition: 300ms all;
}

.popup-trigger:hover {
    opacity: .8;
}

.popup {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    z-index: 1000;
    width: 100%;
    background-color: rgba(94, 110, 141, 0.9);
    opacity: 0;
    visibility: hidden;
    transition: 500ms all;

}

.popup.is-visible {
    opacity: 1;
    visibility: visible;
    transition: 1s all;
}

.popup-container {
    transform: translateY(-50%);
    transition: 500ms all;
    position: relative;
    width: 40%;
    margin: 2em auto;
    top: 5%;
    padding: 5rem;
    background: rgb(255, 255, 255);
    border-radius: .25em .25em .4em .4em;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.is-visible .popup-container {
    transform: translateY(0);
    transition: 500ms all;
}

.popup-container .popup-close {
    position: absolute;
    top: 8px;
    font-size: 0;
    right: 8px;
    width: 30px;
    height: 30px;
}


.popup-container .popup-close::before,
.popup-container .popup-close::after {
    content: '';
    position: absolute;
    top: 12px;
    width: 14px;
    height: 3px;
    background-color: #8f9cb5;
}

.popup-container .popup-close::before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    left: 8px;
}

.popup-container .popup-close::after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    right: 8px;
}


.popup-container .popup-close:hover:before,
.popup-container .popup-close:hover:after {
    background-color: #000000;
    transition: 300ms all;
}

en de html

code:

 <div class="banner_section layout_padding">
      <div class="container">
        <div class="row">
          <div class="col-sm-5">

            <h3 class="banner_taital_1">Jouw stijl, Onze zorg</h3>
            <p class="banner_text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, <a href="#0" id="info"
                class="info popup-trigger" title="info">Lees meer..</a>

              <div class="popup" role="alert">
                <div class="popup-container">
                  <a href="#0" class="popup-close img-replace">Sluiten</a>
                  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged...</p>
                </div>

hierbij nog 2 fotos dan snap je makkelijker wat ik bedoel





zoals op foto 2 zie je dat de tekst goed en mooi leesbaar is maar zo gauw ik verklein ziet de tekst er niet meer uit zoals op foto 1


met vriendelijke groet Bryan

[Voor 91% gewijzigd door bybryan op 09-02-2021 20:25]

[Alm4riC]

Hoi Bryan,

Dit klopt. Je gebruikt geen media rules of iets dergelijks om je teksten en padding kleiner te maken bij een ander scherm formaat. Op een klein apparaat is er minder ruimte, en wanneer je dan een padding aanhoudt van in jou geval 5rem dan is er niet veel ruimte meer over om de tekst te plaatsen.

Ook de grootte van de tekst blijft in beide gevallen staan op 18px. Om dit op te lossen kan je 2 dingen (en misschien nog wel meer) doen:
- Zoeken op Fluid Typography / Fluid Design
- Media rules gebruiken

Succes

[bybryan]

Hardstikke bedankt

het is opgelost was even goed lezen en proberen maar het is gelukt bedankt voor de antwoorden

Gr Bryan

[RobIII]

Hoi Bryan,

De vragen die er staan wanneer je hier een nieuw topic opent staan er niet voor niks:

Mijn vraag
...

Relevante software en hardware die ik gebruik
...

Wat ik al gevonden of geprobeerd heb
...

Lees voor een volgend topic even onze Quickstart even door a.u.b.

Verder is het niet nodig om elke post te eindigen met een groet; wij doen elkaar permanent de groeten