• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Ustawienie grafiki "Strona w budowie" w Bootstrap 5 - jak pozbyć się marginesów?

Object Storage Arubacloud
+1 głos
158 wizyt
pytanie zadane 26 maja 2023 w Systemy CMS przez bwl Obywatel (1,530 p.)

Cześć, mam problem z usunięciem marginesów w bootstrapie, chcę ustawić dwie grafiki informujące, że strona jest w budowie - jedną dla komputerów jedną dla urządzeń mobilnych. 

Próbuję tak: 

    <style>
        body,
        html {
            margin: 0;
            padding: 0;
        }

        .full-width-img-container {
            margin: 0;
            padding: 0;
        }

        .full-width-img-container .row {
            margin: 0;
            padding: 0;
        }

        .full-width-img {
            width: 100%;
        }

        @media (min-width: 992px) {
            .full-width-img {
                width: 100vw;
            }
        }
    </style>
    <title>Strona w Budowie</title>
</head>
<body>
<div class="container-fluid full-width-img-container">
    <div class="row">
        <div class="col">
            <img src="img/mala.jpg.jpg" class="img-fluid d-block d-lg-none full-width-img" alt="mala grafika">
            <img src="img/b1.jpg" class="img-fluid d-none d-lg-block full-width-img" alt="duza grafika">
        </div>
    </div>
</div>

Przy okazji, jakich rozmiarów grafik powinienem użyć dla komputerów, a jakich dla urządzeń mobilnych?

2 odpowiedzi

0 głosów
odpowiedź 26 maja 2023 przez VBService Ekspert (253,280 p.)
wybrane 27 maja 2023 przez bwl
 
Najlepsza

IMO nie ustawiłeś wartości dla .col np.

[ on-line ]

  .full-width-img-container,
  .full-width-img-container .row,
  .full-width-img-container .col {
    margin: 0;
    padding: 0;
  }

 

komentarz 27 maja 2023 przez bwl Obywatel (1,530 p.)
Ufff... Bardzo dziękuję za pomoc ! :) Możesz podpowiedzieć jeszcze odnośnie rozmiarów grafik ?

Dzięki.
komentarz 27 maja 2023 przez VBService Ekspert (253,280 p.)

Sprawdź: element <picture> i responsive images

0 głosów
odpowiedź 26 maja 2023 przez pablop76 VIP (123,160 p.)

Podobne pytania

–1 głos
1 odpowiedź 320 wizyt
0 głosów
2 odpowiedzi 239 wizyt
pytanie zadane 12 lutego 2019 w HTML i CSS przez vingilot85 Obywatel (1,150 p.)
0 głosów
5 odpowiedzi 4,094 wizyt
pytanie zadane 22 sierpnia 2015 w HTML i CSS przez Agentok Użytkownik (660 p.)

92,563 zapytań

141,413 odpowiedzi

319,590 komentarzy

61,948 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...