• Locked
1 reply [Last post]
Sun, 2013-06-02 04:13
choikh
choikh's picture
Offline
newbie
Hong Kong
Last seen: 10 years 3 days ago
Hong Kong
Timezone: GMT+8
Joined: 2013-06-02
Posts: 1
Points: 2

Hello guys,
I have currently trying to make css transition into my website.
I think I have done a great job on a desktop. However, when I go to mobile, bad thing happen Sad
The page is here: My Problem Page

What I want to do is like this: when mouse over the avatar, the <div> increase length and a text box showing my name and contact appear below.

/* About Us CSS
------------------------------------------------------------ */
.left {
	float: left;
}
 
.right {
	float: right;
}
 
.single-set {
	overflow: hidden;
	padding: 15px;
}
 
.container {
	margin: 15px;
	border: 10px solid #fff;
	position: relative;
	overflow: hidden;
	height: 300px;
	opacity: .5;
	-webkit-box-shadow: 0 0 3px #000;
	-moz-box-shadow: 0 0 3px #000;
	box-shadow: 0 0 3px #000;
	-webkit-transition: all .5s ease-out;
	-moz-transition: all .5s ease-out;
	-o-transition: all .5s ease-out;
	transition: all .5s ease-out;
}
 
.container:hover {
	opacity: 1;
	cursor: default;
	-webkit-box-shadow: 0 0 10px #000;
	-moz-box-shadow: 0 0 10px #000;
	box-shadow: 0 0 10px #000;
	height: 520px;
}
 
.about-text {
	background: rgba(0,0,0,0.2);
	color: white;
	height: auto;
	width: 300px;
	position: absolute;
}
 
.about {
	-webkit-transition: all .5s ease-out;
	-moz-transition: all .5s ease-out;
	-o-transition: all .5s ease-out;
	transition: all .5s ease-out;
	width: 300px;
	top: 800px;
}
 
.container:hover .about {
	left: 0;
	top: 300px;
}
 
@media only screen and (max-width: 1200px) {
	.right {
		float: left;
	}
}
 
@media only screen and (max-width: 320px) {
	.container {
		height: 200px;
	}
 
	.container:hover {
		height: 410px;
	}
 
	.container:hover .about {
		left: 0;
		top: 200px;
	}
}

I use div class="single-set" to wrap div class="container left", then a 300*300px avatar.
Below the div is article tag of my name and contact information.

<div class="single-set">
<div class="container left">
 
<img class="alignnone size-full wp-image-77" alt="Nick_Tam" src="http://hkgraphy.com/wp-content/uploads/2013/05/Nick_Tam.jpg" />
 
<article class="about about-text">
<h1>Nick Tam</h1>
<h3>Photographer</h3>
Event
Graduation
Family and pet
<a href="[email protected]">nicktam@somewhere</a>
<img alt="" src="http://hkgraphy.com/wp-content/uploads/2013/05/whatsapp-messenger.png" /> 9012 2691
 
</article></div>
<div class="container right">
 
<img class="alignnone size-full wp-image-75" alt="Kevin_Choi" src="http://hkgraphy.com/wp-content/uploads/2013/05/Kevin_Choi.jpg" />
 
<article class="about about-text">
<h1>Kevin Choi</h1>
<h3>Photographer</h3>
Product
Commercial
Baby and Pregnancy
<a href="mailto:[email protected]">kevinchoi@somewhere</a>
<img alt="" src="http://hkgraphy.com/wp-content/uploads/2013/05/whatsapp-messenger.png" /> 9607 1202
 
</article></div>
</div>
<!---close single-set--->

I also try to make mobile responsive. Problem appear now.
This code can work well on my iPhone4s. When I try to use Galaxy note, the screen resolution is slightly larger than iPhone, but not enough to show the whole 300*300px avatar (It is auto resize to fit a small screen). And then then container div box is not perfect square and the text box below is therefore cannot align well.

Any one can help me Sad( ?

[mod: modified email addresses]

Top
Tags:
Sun, 2013-06-02 23:55
#1
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 5 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Sounds like you need to

Sounds like you need to consider resizing the image and text when the screen resolution can't fit the content.
I'd use media queries to shrink things when needed.

The site looks good on my phone (Nexus 7)

Top
  • Locked