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

Wyśrodkowanie divów / RWD

VPS Starter Arubacloud
0 głosów
314 wizyt
pytanie zadane 16 czerwca 2017 w HTML i CSS przez kralcz88 Obywatel (1,810 p.)
edycja 16 czerwca 2017 przez ScriptyChris

Mam dwa problemy, może ktoś z Was podsunie rozwiązanie.

1. Jak widać w kodzie HTML, mam w sekcji 6 obrazków (po 2 w rzędzie). Szerokość ustawiona za pomocą grida z Bootstrapa. Nie wiem jak jest wyśrodkować. Wymyśliłem doraźne rozwiązanie z dodaniem col-md-offset-1 do diva z obrazkiem po lewej stronie.

Jak wyśrodkować divy, aby były idealnie na środku z 15px marginesem pomiędzy divem z obrazkiem po lewej i prawej stronie.

2.  W jaki sposób dopisywać media query w kodzie Sass do danego elementu? Proszę o przykład.  

<section class="second-section">
        <div class="headline">
            <p class="headline-par">Select your venue</p>
        </div>

        <div class="container">
            <div class="row">
                <div class="size img1 col-md-5 col-md-offset-1">
                    <div class="info">
                        <p class="par-info">Adelaide</p>
                        <p class="par-info-data">1 Dec 2016 - 1 Mar 2017</p>
                        <a href="#" target="_blank">
                            <button class="btn btn-danger">Find sessions and book <i class="fa fa-ticket" aria-hidden="true"></i></button>
                        </a>
                    </div>    
                </div>
                <div class="size img2 col-md-5">
                        <div class="info">
                        <p class="par-info">Brisbane</p>
                        <p class="par-info-data">1 Dec 2016 - 1 Mar 2017</p>
                        <a href="#" target="_blank">
                            <button class="btn btn-danger">Find sessions and book <i class="fa fa-ticket" aria-hidden="true"></i></button>
                        </a>
                    </div>    
                </div>
            </div>

            <div class="row">
                <div class="size img3 col-md-5 col-md-offset-1">
                        <div class="info">
                        <p class="par-info">Melbourne</p>
                        <p class="par-info-data">1 Dec 2016 - 1 Mar 2017</p>
                        <a href="#" target="_blank">
                            <button class="btn btn-danger">Find sessions and book <i class="fa fa-ticket" aria-hidden="true"></i></button>
                        </a>
                    </div>    
                </div>

                <div class="size img4 col-md-5">
                        <div class="info">
                        <p class="par-info">Perth</p>
                        <p class="par-info-data">1 Dec 2016 - 1 Mar 2017</p>
                        <a href="#" target="_blank">
                            <button class="btn btn-danger">Find sessions and book <i class="fa fa-ticket" aria-hidden="true"></i></button>
                        </a>
                    </div>    
                </div>
            </div>

            <div class="row">
                <div class="size img5 col-md-5 col-md-offset-1">
                    <div class="dark-layer">
                        
                    </div>    
                </div>

                <div class="size img6 col-md-5">
                        <div class="info">
                        <p class="par-info">Sydney</p>
                        <p class="par-info-data">1 Dec 2016 - 1 Mar 2017</p>
                        <a href="#" target="_blank">
                            <button class="btn btn-danger">Find sessions and book <i class="fa fa-ticket" aria-hidden="true"></i></button>
                        </a>
                    </div>    
                </div>
            </div>
        </div>
    </section>

.second-section
	.headline {
		background-color: $project-pinkLight2;
		margin: 40px auto;
	}
		.headline-par {
			text-transform: uppercase;
			text-align: center;
			font-size: 25px;
			padding: 20px;
		}
	.container
		.row
			.size{
				width: 450px;
				height: 350px;
				margin-bottom: 15px;
				background-size: cover;
				background-position: center;
				overflow: hidden;
			}
			.img1 {
				@extend .size;
				background-image: url("bg_images/18.png");
			}
			.img2 {
				@extend .size;
				background-image: url("bg_images/9.png");
				margin-left: 15px;
			}
			.img3 {
				@extend .size;
				background-image: url("bg_images/8.png");
			}
			.img4 {
				@extend .size;
				background-image: url("bg_images/7.png");
				margin-left: 15px;
			}
			.img5 {
				@extend .size;
				background-image: url("bg_images/7.png");
			}
			.img6 {
				@extend .size;
				background-image: url("bg_images/6.png");
				margin-left: 15px;
			}
				.info {
					position: relative;
					top: 190px;
					left: 10px;
				}
					.par-info {
						text-transform: uppercase;
						color: #fff;
						font-size: 24px;
					}
					.par-info-data {
						color: #fff;
						font-size: 18px;
					}
				.dark-layer {
					position: relative;
					right: 15px;
					width: 450px;
					height: 350px;
					background-color: rgba(2,20,51,0.8);
				}

 

1 odpowiedź

0 głosów
odpowiedź 16 czerwca 2017 przez bobobob Użytkownik (790 p.)
wybrane 16 czerwca 2017 przez kralcz88
 
Najlepsza
Aby wyśrodkować obrazki spróbuj styl css

margin: 0 auto;

lub

display: flex;

justify-content: center;

 

 

Przykład media:

@media (max-width: 750px){
    footer{
        .black{
            img{
                display: none;
            }
        }
    }
}
komentarz 18 czerwca 2017 przez kralcz88 Obywatel (1,810 p.)
Pomoże ktoś? Utknąłem w końcowej części projektu (4 zdjęcia obok siebie na różowym tle - przygotowane pod slider - zawiera już strzałki). Niestety RWD tego elementu działa niepoprawnie. Chciałbym żeby dla max-width: 767px zdjęcia wyświetlały się równo jeden pod drugim (niestety teraz trochę się to rozjeżdża.) Próbowałem już na różne sposoby nad tym zapanować ale nie udało się. Przesyłam link do projektu na githubie: https://github.com/ramarcinek/HTML_task
komentarz 20 czerwca 2017 przez bobobob Użytkownik (790 p.)
Chętnie bym pomógł ale link nie dziala.

Podobne pytania

–1 głos
1 odpowiedź 252 wizyt
pytanie zadane 5 stycznia 2019 w HTML i CSS przez pomaraqcz Początkujący (380 p.)
0 głosów
0 odpowiedzi 167 wizyt
pytanie zadane 16 sierpnia 2017 w HTML i CSS przez Patrick Nowicjusz (120 p.)
+1 głos
2 odpowiedzi 204 wizyt
pytanie zadane 17 czerwca 2017 w HTML i CSS przez kralcz88 Obywatel (1,810 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 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!

...