• 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
120 wizyt
pytanie zadane 16 czerwca 2017 w HTML i CSS przez kralcz88 Obywatel (1,730 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,730 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ź 65 wizyt
pytanie zadane 5 stycznia w HTML i CSS przez pomaraqcz Początkujący (380 p.)
0 głosów
0 odpowiedzi 90 wizyt
pytanie zadane 16 sierpnia 2017 w HTML i CSS przez Patrick Nowicjusz (120 p.)
+1 głos
2 odpowiedzi 79 wizyt
pytanie zadane 17 czerwca 2017 w HTML i CSS przez kralcz88 Obywatel (1,730 p.)
Porady nie od parady
Zadając pytanie postaraj się o odpowiedni tytuł, kategorię oraz tagi.Tagi

66,324 zapytań

113,061 odpowiedzi

239,218 komentarzy

46,589 pasjonatów

Przeglądających: 264
Pasjonatów: 8 Gości: 256

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.

...