CODEWITHSUNDEEP
htmlcssmedia-queries
Miha Šušteršič
Miha Šušteršič

Reputation: 10052

div positioning is off when changing visibility

I'm trying to hide an anchored link to tel with a media query. So far it works as intended, but when I try to replace it with a similar icon and text without the anchor, it gets repositioned a bit out of line (like a 0.5em margin on top I guess). Can't figure out what's going on here.

This is a snippet of my code.

I am also using normalize.css.

/********************************************
CONTACT
********************************************/

#contact {
	border-top: solid 0.5em #0e2951;
	border-bottom: solid 0.5em #0e2951;
	background-color: #fff;
}

.contact-icon-box {
	width: 32%;
	display: inline-block;
	margin-top: 1.5em;
	text-align: center;
}
.contact-icon-link {
	width: 1em;
	margin: 0 auto;
	text-align: center;
	background-color: #3d7ddd;
	border-radius: 150px;
	font-size: 5em;
}

#contact p {
	padding: 1em 2em;
	margin-top: 1em;
}

#tablet-phone, #facebook-tablet, #email-tablet {
	display: none;
}

#tablet-phone p {
	margin: 0 auto;
}



/********************************************
TABLET ADJUSTMENTS
********************************************/

@media screen and (min-width: 768px) {
    body {
        background-color: lightblue;
    }

    #mobile-phone {
    	display: none;
    }

    #tablet-phone, #facebook-tablet, #email-tablet {
		display: inline-block;
	}

}
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>

<div id="contact">
	<div class="contact-icon-box">
		<a href="https://www.facebook.com/miha.sustersic.5"><div class="contact-icon-link ion-social-facebook">
		</div><p id="facebook-tablet">Miha Šušteršič</p></a>
	</div>

	<div class="contact-icon-box" id="mobile-phone">
		<a href="tel:+38631535919"><div class="contact-icon-link ion-ios-telephone">
		</div></a>
	</div>

	<div class="contact-icon-box" id="tablet-phone">
		<div class="contact-icon-link ion-ios-telephone">
		</div>
		<p>+386 31535919</p>
	</div>

	<div class="contact-icon-box">
		<a href="mailto:[email protected]"><div class="contact-icon-link ion-email">
		</div><p id="email-tablet">[email protected]</p></a>
	</div>
	<p>I am currently working for design and/or development work. If interested, contact me using facebook or email. Please only use phone contact when urgent.</p>
</div>

The background-color adjustment is there just to check that the media queries are working.

Upvotes: 0

Views: 38

Answers (1)

CupawnTae
CupawnTae

Reputation: 14580

Your

#tablet-phone p {
    margin: 0 auto;
}

is overriding the vertical margin in your

#contact p {
    padding: 1em 2em;
    margin-top: 1em;
}

And so the non-link paragraph is taking up less vertical space than the link paragraphs, and the vertical alignment is going bottom-up, so the icon moves down to compensate.

You can prevent this by adding a more specific selector to make sure that particular paragraph style isn't overridden:

#contact p, #contact #tablet-phone p {
    padding: 1em 2em;
    margin-top: 1em;
}

Updated snippet below:

/********************************************
CONTACT
********************************************/

#contact {
	border-top: solid 0.5em #0e2951;
	border-bottom: solid 0.5em #0e2951;
	background-color: #fff;
}

.contact-icon-box {
	width: 32%;
	display: inline-block;
	margin-top: 1.5em;
	text-align: center;
}
.contact-icon-link {
	width: 1em;
	margin: 0 auto;
	text-align: center;
	background-color: #3d7ddd;
	border-radius: 150px;
	font-size: 5em;
}

#contact p, #contact #tablet-phone p {
	padding: 1em 2em;
	margin-top: 1em;
}

#tablet-phone, #facebook-tablet, #email-tablet {
	display: none;
}

#tablet-phone p {
	margin: 0 auto;
}


/********************************************
TABLET ADJUSTMENTS
********************************************/

@media screen and (min-width: 768px) {
    body {
        background-color: lightblue;
    }

    #mobile-phone {
    	display: none;
    }

    #tablet-phone, #facebook-tablet, #email-tablet {
		display: inline-block;
	}

}
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>

<div id="contact">
	<div class="contact-icon-box">
		<a href="https://www.facebook.com/miha.sustersic.5"><div class="contact-icon-link ion-social-facebook">
		</div><p id="facebook-tablet">Miha Šušteršič</p></a>
	</div>

	<div class="contact-icon-box" id="mobile-phone">
		<a href="tel:+38631535919"><div class="contact-icon-link ion-ios-telephone">
		</div></a>
	</div>

	<div class="contact-icon-box" id="tablet-phone">
		<div class="contact-icon-link ion-ios-telephone">
		</div>
		<p>+386 31535919</p>
	</div>

	<div class="contact-icon-box">
		<a href="mailto:[email protected]"><div class="contact-icon-link ion-email">
		</div><p id="email-tablet">[email protected]</p></a>
	</div>
	<p>I am currently working for design and/or development work. If interested, contact me using facebook or email. Please only use phone contact when urgent.</p>
</div>

Upvotes: 2

Related Questions