Toon posts:

popup responsive alleen text niet

Pagina: 1
Acties:
  • 297 views

Vraag


  • bybryan
  • Registratie: Februari 2021
  • Laatst online: 31-03 02:57
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
.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]

Beste antwoord (via bybryan op 09-02-2021 21:20)


  • Alm4riC
  • Registratie: Februari 2005
  • Laatst online: 29-11 21:50
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 :)

Alle reacties


  • OverloadOfRed
  • Registratie: Maart 2010
  • Nu online

OverloadOfRed

Bla, blabla

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

Ik ben chatman, supersnel met MSN. Er is niemand die me niet kent


  • Mr. HTTP
  • Registratie: November 2020
  • Laatst online: 09-03 04:23
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:
1
[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. O-)
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
  • Registratie: Februari 2021
  • Laatst online: 31-03 02:57
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
.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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <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]


Acties:
  • Beste antwoord
  • 0Henk 'm!

  • Alm4riC
  • Registratie: Februari 2005
  • Laatst online: 29-11 21:50
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
  • Registratie: Februari 2021
  • Laatst online: 31-03 02:57
Hardstikke bedankt

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

Gr Bryan

  • RobIII
  • Registratie: December 2001
  • Laatst online: 20:58

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

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 :)

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Roses are red Violets are blue, Unexpected ‘{‘ on line 32.

Over mij

Pagina: 1

Dit topic is gesloten.



Google Pixel 7 Sony WH-1000XM5 Apple iPhone 14 Samsung Galaxy Watch5, 44mm Sonic Frontiers Samsung Galaxy Z Fold4 Insta360 X3 Nintendo Switch Lite

Tweakers is samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer onderdeel van DPG Media B.V.
Alle rechten voorbehouden © 1998 - 2022 Hosting door True

Tweakers maakt gebruik van cookies

Tweakers plaatst functionele en analytische cookies voor het functioneren van de website en het verbeteren van de website-ervaring. Deze cookies zijn noodzakelijk. Om op Tweakers relevantere advertenties te tonen en om ingesloten content van derden te tonen (bijvoorbeeld video's), vragen we je toestemming. Via ingesloten content kunnen derde partijen diensten leveren en verbeteren, bezoekersstatistieken bijhouden, gepersonaliseerde content tonen, gerichte advertenties tonen en gebruikersprofielen opbouwen. Hiervoor worden apparaatgegevens, IP-adres, geolocatie en surfgedrag vastgelegd.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Toestemming beheren

Hieronder kun je per doeleinde of partij toestemming geven of intrekken. Meer informatie vind je in ons cookiebeleid.

Functioneel en analytisch

Deze cookies zijn noodzakelijk voor het functioneren van de website en het verbeteren van de website-ervaring. Klik op het informatie-icoon voor meer informatie. Meer details

janee

    Relevantere advertenties

    Dit beperkt het aantal keer dat dezelfde advertentie getoond wordt (frequency capping) en maakt het mogelijk om binnen Tweakers contextuele advertenties te tonen op basis van pagina's die je hebt bezocht. Meer details

    Tweakers genereert een willekeurige unieke code als identifier. Deze data wordt niet gedeeld met adverteerders of andere derde partijen en je kunt niet buiten Tweakers gevolgd worden. Indien je bent ingelogd, wordt deze identifier gekoppeld aan je account. Indien je niet bent ingelogd, wordt deze identifier gekoppeld aan je sessie die maximaal 4 maanden actief blijft. Je kunt deze toestemming te allen tijde intrekken.

    Ingesloten content van derden

    Deze cookies kunnen door derde partijen geplaatst worden via ingesloten content. Klik op het informatie-icoon voor meer informatie over de verwerkingsdoeleinden. Meer details

    janee