Solved

Responsive CSS question

Posted on 2016-11-06
2
59 Views
Last Modified: 2016-11-16
Hi, I have created an animation for some xmas gift unwrapping as below,

http://www.shaperweb.com/xmas/home.html

I would need some help or guidance in making the ribbons responsive. Meaning, the ribbon ends should touch the ends and should adjust automatically to different screen size and to mobile. How do i do that?

Other thing is it, the "Open Here" strip shows up in some browsers (Chrome) but not in some browsers (Safari). How do i correct that to appear in all browsers.

Thanks.
0
Comment
Question by:Perumal_RM
2 Comments
 
LVL 24

Assisted Solution

by:lenamtl
lenamtl earned 100 total points
ID: 41876525
Hi,

I usually put max-height  max-width in css instead of fixed dimension or I use percentage
this is usually play well for responsive.

So you may try different values for the ribbon css, the banner div is already 100% which is good.

Also try z-index value for the bottom ribbon

You may also want to read how media query work to set different css values depending of the device size screen. http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

I don't know if you are already using Bootstrap framework, it's have media query and helper class for alignment. http://getbootstrap.com/css/#helper-classes

Open here tag does not show all the time even with Chrome..
Try to place the image into the tag div, now it is outside the div...
The animation is too quick so I don't think user will have the time to click on it anyway so you may adjust the delay .

By the way you have error with turn.js when inspecting the code with chrome (right click inspect)
turn.js:1798 Uncaught TypeError: Cannot read property 'disabled' of undefined
    at n.fn.init._eventMove (http://www.shaperweb.com/xmas/turn.js:1798:12)
    at HTMLDocument.<anonymous> (http://www.shaperweb.com/xmas/turn.js:287:29)
    at HTMLDocument.dispatch (https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:3:12444)
    at HTMLDocument.r.handle (https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js:3:9173)

Open in new window


I guess you need to initialize turn.js ..
0
 
LVL 33

Accepted Solution

by:
Slick812 earned 400 total points
ID: 41877732
greetings Perumal_RM, , I do not see any way to have the Images you use in the -
  <div id='leftribbon'  style='position: absolute;top: 15%;left: 0;z-index: 1;'><img src='images/RibbonLeft.png'/></div>
  <div id='topribbon' style='position: absolute;top: 0;left: 47%;'><img src='images/RibbonTop.png'/></div>
  <div id='rightribbon' style='position: absolute;top: 38%;left: 55%;'><img src='images/RibbonRight.png'/></div>
  <div id='bottomribbon' style='position: absolute;top: 52%;left: 47%;'><img src='images/RibbonBottom.png'/></div>

Open in new window


ever be capable of being "responsive", this is mostly due to the image in -
     <img src='images/RibbonLeft.png'/>
you have the ribbon "BOW" and the "RIBBON" in the image, you need to have a separate "BOW" image in order to have that "CENTERED" on your <div id='banner'>

I have redone the four images you use in this ribbon thing, and use two images for the "ribbons" created a third image as the "bow.png" to be centered in the <div id='banner'>
center BOW imagevertical Ribbon imagehorizontal Ribbon image
In order to use any page on phones and tablets as a "responsive page" you MUST have the meta viewport -
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />

here is a page that looks responsive -
<!DOCTYPE html>
<html><head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<style>
body{
background:#fff;
margin: 1px;
}

#banner {
position:relative;
overflow:hidden;
height:398px;
border: 1px solid #922;
}

.magazine{
height:398px;
}

.magazine .turn-page{
background-color:#fff;
background-size:100% 100%;
}

#openImg {
display: inline-block;
position: absolute;
top: 200px;
left: 50%;
margin-left: -260px;
cursor: pointer;
z-index: 4;
}

#leftribbon {
position: absolute;
top: 168px;
left: 0;
z-index: 2;
}

#topribbon {
position: absolute;
top: -2px;
left: 50%;
z-index: 2;
margin-left: -22px;
}

#bottomribbon {
position: absolute;
bottom: -1px;
left: 50%;
z-index: 2;
margin-left: -22px;
}

#rightribbon {
position: absolute;
top: 168px;
right: 0px;
z-index: 2;
}

#bow {
position: absolute;
top: 90px;
left: 50%;
margin-left: -175px;
z-index: 3;
}

</style>

<script>

</script>	
	</head>
<body>
<div id='banner'>
  <div class='magazine'>
  <div style="height: 395px; background-image:url(images/wrapper.png);" class='double'></div>
  <div class='orignalContent'>Discounted Price</div>
  </div>
  
  <div id="openImg"><img id='openhere' src='images/openhere.png' /></div>
  <div id='leftribbon'><img src='images/ribbonHorz.png'/></div>
  <div id='topribbon'><img src='images/ribbonVer.png'/></div>
  <div id='rightribbon'><img src='images/ribbonHorz.png'/></div>
  <div id='bottomribbon'><img src='images/ribbonVer.png'/></div>
  <div id='bow'><img src='images/bow.png'/></div>
				
</div>
</body>
</html>

Open in new window


You really need to Not use the "inline" style like -
    <div id='leftribbon'  style='position: absolute;top: 15%;left: 0;z-index: 1;'>

and instead use the element ID  or CLASS to add CSS to your page like -
<style>
#leftribbon {
position: absolute;
top: 168px;
left: 0;
z-index: 2;
}
</style>

<div id='leftribbon'></div>

= = = = = = = = = = = = = =
also in this arrangement of layers, the z-index is important, , I did not understand what you were doing this the z-index values you used? ?

Ask questions if there is something that does not seem to be what you may need.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

943 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now