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

Wyśrodkowanie divów / RWD

0 głosów
111 wizyt
pytanie zadane 16 czerwca 2017 w HTML i CSS przez kralcz88 Obywatel (1,640 p.)
edycja 16 czerwca 2017 przez JSHolic

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,640 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ź 55 wizyt
pytanie zadane 5 stycznia w HTML i CSS przez pomaraqcz Początkujący (380 p.)
0 głosów
0 odpowiedzi 89 wizyt
pytanie zadane 16 sierpnia 2017 w HTML i CSS przez Patrick Nowicjusz (120 p.)
+1 głos
2 odpowiedzi 77 wizyt
pytanie zadane 17 czerwca 2017 w HTML i CSS przez kralcz88 Obywatel (1,640 p.)
Porady nie od parady
Publikując kody źródłowe korzystaj ze specjalnego bloczku koloryzującego składnię (przycisk z napisem code w edytorze). Nie zapomnij o ustawieniu odpowiedniego języka z rozwijanego menu oraz czytelnym formatowaniu kodu.Przycisk code

63,369 zapytań

109,637 odpowiedzi

229,050 komentarzy

44,353 pasjonatów

Przeglądających: 265
Pasjonatów: 13 Gości: 252

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...