Cookies op Tweakers

Tweakers is onderdeel van DPG Media en maakt gebruik van cookies, JavaScript en vergelijkbare technologie om je onder andere een optimale gebruikerservaring te bieden. Ook kan Tweakers hierdoor het gedrag van bezoekers vastleggen en analyseren. Door gebruik te maken van deze website, of door op 'Cookies accepteren' te klikken, geef je toestemming voor het gebruik van cookies. Wil je meer informatie over cookies en hoe ze worden gebruikt? Bekijk dan ons cookiebeleid.

Meer informatie
Toon posts:

popup responsive alleen text niet

Pagina: 1
Acties:
  • 283 views

Vraag


  • bybryan
  • Registratie: februari 2021
  • Laatst online: 03-03 20:51
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: 18:21
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
  • Laatst online: 18:27

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: 20-06 17:00
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: 03-03 20:51
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: 18:21
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: 03-03 20:51
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: 01:14

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.



Apple iPad Pro (2021) 11" Wi-Fi, 8GB ram Microsoft Xbox Series X LG CX Google Pixel 5a 5G Sony XH90 / XH92 Samsung Galaxy S21 5G Sony PlayStation 5 Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True