Logo en tekst wat hoger in foto

Status
Niet open voor verdere reacties.

rob1970

Gebruiker
Lid geworden
14 jan 2012
Berichten
296
Ben bezig met deze website: https://met-rob.com/cleverbuyparts/

Het logo en de tekst zou wat hoger in de foto moeten komen zodat de tekst ook in het donkere gedeelte komt te staan zodat het wat leesbaarder is.

Ik kom er maar niet achter waar in de code dat staat om het aan te kunnen passen.

Hier zou het volgens mij ergens aangepast moeten kunnen worden:
Code:
#banner {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		cursor: default;
		height: 100vh;
		min-height: 35em;
		overflow: hidden;
		position: relative;
		text-align: center;
	}

		#banner h2 {
			-moz-transform: scale(1);
			-webkit-transform: scale(1);
			-ms-transform: scale(1);
			transform: scale(1);
			-moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease;
			-webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
			-ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease;
			transition: transform 0.5s ease, opacity 0.5s ease;
			display: inline-block;
			font-size: 1.75em;
			opacity: 1;
			padding: 0.35em 1em;
			position: relative;
			z-index: 1;
		}

			#banner h2:before, #banner h2:after {
				-moz-transition: width 0.85s ease;
				-webkit-transition: width 0.85s ease;
				-ms-transition: width 0.85s ease;
				transition: width 0.85s ease;
				-moz-transition-delay: 0.25s;
				-webkit-transition-delay: 0.25s;
				-ms-transition-delay: 0.25s;
				transition-delay: 0.25s;
				background: #fff;
				content: '';
				display: block;
				height: 2px;
				position: absolute;
				width: 100%;
			}

			#banner h2:before {
				top: 0;
				left: 0;
			}

			#banner h2:after {
				bottom: 0;
				right: 0;
			}

		#banner p {
			letter-spacing: 0.225em;
			text-transform: uppercase;
		}

			#banner p a {
				color: inherit;
			}

		#banner .more {
			-moz-transition: -moz-transform 0.75s ease, opacity 0.75s ease;
			-webkit-transition: -webkit-transform 0.75s ease, opacity 0.75s ease;
			-ms-transition: -ms-transform 0.75s ease, opacity 0.75s ease;
			transition: transform 0.75s ease, opacity 0.75s ease;
			-moz-transition-delay: 3.5s;
			-webkit-transition-delay: 3.5s;
			-ms-transition-delay: 3.5s;
			transition-delay: 3.5s;
			-moz-transform: translateY(0);
			-webkit-transform: translateY(0);
			-ms-transform: translateY(0);
			transform: translateY(0);
			border: none;
			bottom: 0;
			color: inherit;
			font-size: 0.8em;
			height: 8.5em;
			left: 50%;
			letter-spacing: 0.225em;
			margin-left: -8.5em;
			opacity: 1;
			outline: 0;
			padding-left: 0.225em;
			position: absolute;
			text-align: center;
			text-transform: uppercase;
			width: 16em;
			z-index: 1;
		}

			#banner .more:after {
				background-image: url("images/arrow.svg");
				background-position: center;
				background-repeat: no-repeat;
				background-size: contain;
				bottom: 4em;
				content: '';
				display: block;
				height: 1.5em;
				left: 50%;
				margin: 0 0 0 -0.75em;
				position: absolute;
				width: 1.5em;
			}

		#banner:after {
			pointer-events: none;
			-moz-transition: opacity 3s ease-in-out;
			-webkit-transition: opacity 3s ease-in-out;
			-ms-transition: opacity 3s ease-in-out;
			transition: opacity 3s ease-in-out;
			-moz-transition-delay: 1.25s;
			-webkit-transition-delay: 1.25s;
			-ms-transition-delay: 1.25s;
			transition-delay: 1.25s;
			content: '';
			background: #2e3842;
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			opacity: 0;
		}


gr. Rob
 

Bijlagen

  • Schermafbeelding 2020-11-05 om 22.36.58.png
    Schermafbeelding 2020-11-05 om 22.36.58.png
    594,9 KB · Weergaven: 35
Laatst bewerkt door een moderator:
Je zou dit kunnen toevoegen aan je CSS bestand, misschien dat je voor mobiel een andere waarde moet instellen.

Code:
.inner {
    margin-top: -20em;
}
 
we zijn er bijna

Heb het opgelost. bedankt voor de tip.

heb dit toegevoegd aan de css en nu staat het goed:

@media screen and (max-width: 980px) {

.inner {
margin-top: 0em;
}
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan