I'm a Newbie with CSS, I want to make a responsive design for mobile IE. Now "it appear as a blank page",But it's working well in Google chrome and other rest of browsers :-)
Below is my codes that's I used
HTML:
<div class="main">
<div class="container">
<div class="marquee">
<marquee scrollamount="3" direction="right" dir="ltr">
<h3 align="center" style="color:#804000;font-size:large;margin-top:0px;"><strong>
<img height="37" src="http://www.ghadaalsamman.com/new/images/image21.png">
</strong></h3>
</marquee>
</div>
<a class="button" id="btn1" href="http://ghadaalsamman.com/new/site.html"></a>
</div>
</div>
CSS:
html {
height: 100%;
width: 100%;
}
body {
background-image: url("http://www.ghadaalsamman.com/new/images/bg.gif");
background-repeat: no-repeat;
background-position: center center;
height: 100%;
margin: 0;
}
.marquee {
display: block;
position: absolute;
top: 43%;
width: 100%;
}
#btn1 {
background-image: url("http://www.ghadaalsamman.com/new/images/enter.gif");
background-repeat: no-repeat;
background-position: center center;
bottom: 10px;
display: block;
height: 53px;
margin: 0 auto;
position: absolute;
width: 100%;
}
.button {
padding: 5px;
}
.container {
display: block;
height: 100%;
margin: 0 auto;
max-width: 960px;
position: relative;
}
.main {
height: 100%;
padding: 0 20px;
}
#media screen and (max-width:500px) {
#btn1{
background-size: 100% auto;
}
}
jsfiddle
Desktop View
Thanks in advance
Work great for me on Windows Phone 8.1
I don't think there is an issue with responsiveness, I checked on desktop resizing my browser on IE and also on Windows Phone.
Related
I have the following HTML
.wrapper {
position: relative;
width: 100%;
overflow: hidden;
}
.no-padding {
padding: 0 !important;
}
.home-slider img {
margin-right: 6px;
float: left;
width: 35px;
position: relative;
top: -4px;
}
.home-slider-wrap {
position: relative;
}
.home-slider-wrap .bg-img {
height: 500px;
width: auto;
max-width: none;
}
.img-full {
width: 100%;
}
#media (max-width: 767px) {
.home-slider-wrap .bg-img {
min-height: auto;
min-width: 100%;
width: 100%;
height: auto;
}
}
<div class="wrapper">
<div class="container-fluid no-padding">
<div class="home-slider-wrap">
<div class="home-slider">
<div>
<img src="https://g5-assets-cld-res.cloudinary.com/image/upload/q_auto,f_auto,fl_lossy/g5/g5-c-1t2d31r8-berkshire-communities/g5-cl-i2pbvvuq-creekstone/uploads/pet-friendly.jpg" class="bg-img img-full ing-responsive" alt="">
</div>
</div>
</div>
</div>
</div>
I am trying to resize this image but at the same time also keep a minimum height for devices less than 768px; However as you can see in the demo below, this ain't working out.
The portion of the cat and dog isn't visible when the page is resized for a mobile device.
Demo
How do I fix this? Any help is appreciated.
You could try using a media query
Maybe you can try this css:
background-size: cover;
background-position: center;
background-repeat: no-repeat;
You can use media query to target below 768px width devices to define style like below -
#media (max-width:767px){
.home-slider-wrap .bg-img {
min-height: auto;
min-width: 100%;
width: 100%;
height: auto;
}
}
I need some help with CSS / Responsive Code. As my window size decreases I need all elements to decrease at the same ratio. Having issues with that. The arrow and the Rooster do no decrease as view port decreases.
The Rooster's shadow of his foot should stay slightly covered by the arrow. The top of the arrow's body (not the point) should stay inline with the divide line between the grey and white sections.
I need some help with CSS / Responsive Code. As my window size decreases I need all elements to decrease at the same ratio. Having issues with that. The arrow and the Rooster do no decrease as view port descreses.
The Rooster's shadow of his foot should stay slightly covered by the arrow. The top of the arrow's body (not the point) should stay inline with the divide line between the grey and white sections.
http://www.bootply.com/fiF4GI3g0n
body {
margin: 0px;
}
.special_box {
background-image: url("http://beta.madrooster.com/images/special_bg.png");
background-repeat: no-repeat;
background-size: 100% auto;
height: 434px;
max-width: 100%;
position: relative;
z-index: 1
}
.special_content {
position: absolute;
margin: auto;
height: 85%;
width: 70%;
top: 0;
}
.rodney {
position: absolute;
margin: auto;
height: auto;
width: 100%;
text-align: right;
top: 4%;
right: 16%;
z-index: 5;
}
.rodney img {
max-width: 315px;
height: auto;
}
.special_arrow {
position: absolute;
margin: auto;
bottom: 0;
left: 0;
z-index: 10;
}
.special_arrow img {
max-width: 916px;
height: auto;
display: block;
}
<div class="special_box">
<div class="special_content"></div>
<div class="rodney">
<img src="http://beta.madrooster.com/images/special_rodney.png" alt="rodney" />
</div>
<div class="special_arrow">
<img src="http://beta.madrooster.com/images/special_arrow.png" alt="arrow" />
</div>
</div>
Responsive Design
Try this. With this code the arrow decreases size according to screen size. You can edit it as you like,
Use #media screen property to display content with respect to screen size
<html>
<head>
<style>
body {
margin: 0px;
}
.special_box {
background-image: url("http://beta.madrooster.com/images/special_bg.png");
background-repeat: no-repeat;
background-size: 100% auto;
height: 434px;
max-width: 100%;
position: relative;
z-index: 1
}
.special_content {
position: absolute;
margin: auto;
height: 85%;
width: 70%;
top: 0;
}
.rodney {
position: absolute;
margin: auto;
height: auto;
width: 100%;
text-align: right;
top: 4%;
right: 16%;
z-index: 5;
}
.rodney img {
max-width: 315px;
height: auto;
}
.special_arrow {
position: absolute;
margin: auto;
bottom: 0;
left: 0;
z-index: 10;
}
.special_arrow img {
width:60%;
height: auto;
display: block;
}
#media screen and (max-width:1800px){
.special_arrow img {
width:98%;
height: auto;
display: block;
}
}
</style>
</head>
<body>
<div class="special_box">
<div class="special_content"> </div>
<div class="rodney"> <img src="http://beta.madrooster.com/images/special_rodney.png" alt="rodney"/> </div>
<div class="special_arrow"> <img src="http://beta.madrooster.com/images/special_arrow.png" alt="arrow"/> </div>
</div>
</body>
</html>
I have figured out a way to do this making the Rooster and arrow images with filler transparent space from the top. Not sure this this the best way, but it works.
http://www.bootply.com/wfxTqAKJfo
CSS Code
body {
margin: 0px;
}
.special_box {
background-image: url("http://beta.madrooster.com/images/special_bg.png");
background-repeat: no-repeat;
background-size: 100% auto;
height: 440px;
width: 100%;
position: relative;
z-index: 1
}
.special_content {
margin: auto;
height: auto;
width: 100%;
top: 0;
position: relative;
}
.rodney {
background-image: url("http://beta.madrooster.com/images/special_rodney.png");
background-repeat: no-repeat;
background-size: 22% auto;
background-position: right 21% top;
height: 440px;
width: 100%;
position: relative;
z-index: 5
}
.special_arrow {
background-image: url("http://beta.madrooster.com/images/special_arrow.png");
background-repeat: no-repeat;
background-size: 64% auto;
background-position: left top;
height: 440px;
width: 100%;
position: relative;
z-index: 10
}
HTML Code
<div class="special_box">
<div class="special_content">
</div>
<div class="rodney">
<div class="special_arrow"> </div>
</div>
</div>
I have a list of screenshots. I want to display those inside a desktop-frame. I can achieve the effect easily with CSS but trying to make it responsive is giving me headaches.
My Html structure and style:
<style>
.container {
width: 80%;
margin: 0 auto;
}
.frame {
list-style-type: none;
background-image: url('http://www.hobbysubmarines.com/TV.png');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
margin: 0 auto;
max-width: 651px;
height: 358px;
}
.frame li {
width: 100%;
}
.screenshot {
position: relative;
top: 1px;
left: 5px;
}
</style>
HTML:
<div class="container">
<ul class="frame">
<li><img class="screenshot" src="../img/screenshot1.jpg"></li>
</ul>
</div>
Fiddle: http://jsfiddle.net/faj2rfc8/1/ so you maybe get the idea. If you see the fiddle, it is just to put the cat inside the tv-frame. Making this responsive is my main issue.
I would size the background in 100%, and add a media query to reduce the height of the screenshots for smaller screens. I put a fiddle together for you:
.container {
width: 80%;
margin: 0 auto;
}
.frame {
background-image: url('http://placekitten.com.s3.amazonaws.com/homepage-samples/96/139.jpg');
background-size: 100%;
background-position: center;
margin: 0 auto;
max-width: 651px;
height: 358px;
}
.screenshot {
position: relative;
top: 1px;
left: 5px;
height: 100px;
}
// mobile only
#media screen and (max-width: 479px) {
.screenshot {
height: 40px;
}
}
fiddle: http://jsfiddle.net/gg89qwon/1/
The background is responsive as well, but the button with image and the marquee don't appear on their right position via on mobile,
how to make the the whole index responsive
<div class="main">
<div class="marquee">
<marquee dir="ltr" direction="right" scrollamount="3">
<h3 style="color:#804000;font-size:large;margin-top:0px;" align="center" >
<strong>
<img src="http://www.ghadaalsamman.com/new/images/image21.png" height="37" />
</strong>
</h3>
</marquee>
</div>
</div>
CSS
body {
background: url('images/bg.gif');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
}
.marquee{
position:absolute;
left:400px;
top:300px;
right:400px;
display:inline;
max-width:100%;
}
#btn1 {
height:60px; width:490px;
background: url("images/enter.gif");
background-repeat: no-repeat;
display: inline-block;
margin-top:610px;
margin-left:380px;
}
.button {
padding: 5px;
}
Fiddle :
http://jsfiddle.net/m0sagal/3fp9j/
Desktop View
http://ghadaalsamman.com/new
DEMO
I have made some changes in html & css so use this code:
HTML:
<div class="main">
<div class="container">
<div class="marquee">
<marquee scrollamount="3" direction="right" dir="ltr">
<h3 align="center" style="color:#804000;font-size:large;margin-top:0px;"><strong>
<img height="37" src="http://www.ghadaalsamman.com/new/images/image21.png">
</strong></h3>
</marquee>
</div>
<a class="button" id="btn1" href="http://ghadaalsamman.com/new/site.html"></a>
</div>
</div>
CSS:
html {
height: 100%;
width: 100%;
}
body {
background-image: url("http://www.ghadaalsamman.com/new/images/bg.gif");
background-repeat: no-repeat;
background-position: center center;
height: 100%;
margin: 0;
}
.marquee {
display: block;
position: absolute;
top: 43%;
width: 100%;
}
#btn1 {
background-image: url("http://www.ghadaalsamman.com/new/images/enter.gif");
background-repeat: no-repeat;
background-position: center center;
bottom: 10px;
display: block;
height: 53px;
margin: 0 auto;
position: absolute;
width: 100%;
}
.button {
padding: 5px;
}
.container {
display: block;
height: 100%;
margin: 0 auto;
max-width: 960px;
position: relative;
}
.main {
height: 100%;
padding: 0 20px;
}
#media screen and (max-width:500px) {
#btn1{
background-size: 100% auto;
}
}
What i did:
I added a div after main named container & used it to control max with and fitted both marquee and button inside it using absolute position & that's pretty much did all the trick but for the button background image i have used media query.
The page open with scroll. I want to make the page appear fully responsive without any scroll bar. I tried to set the height to 100% with no luck.
html {
height: 100%;
width: 100%;
}
body{
width:100%;
hight:100%;
margin: 0;
padding:0;
}
.main{
background-image: url("http://www.ghadaalsamman.com/new/images/bg.gif");
background-repeat: no-repeat;
background-position: center center;
margin: 0;
padding-top: 30vw;
background-size: 100%;
}
.marquee {
display: block;
position: relative;
width: 51vw;
margin: auto;
}
marquee{
width: 100%;
margin: auto;
display: block;
}
#btn1 {
background: url("http://www.ghadaalsamman.com/new/images/enter.gif") no-repeat scroll center center ;
display: block;
height: 53px;
margin: 0 auto;
position: relative;
width: 50%;
background-size: 100%;
margin-top: 33%;
margin-bottom:1%;
}
.button {
padding: 5px;
}
.container {
display: block;
height: 100%;
margin: 0 auto;
max-width: 960px;
position: relative;
}
#media screen and (max-width:500px) {
#btn1{
background-size: 100% auto;
}
}
<div class="main">
<div class="container">
<div class="marquee">
<marquee scrollamount="3" direction="right" dir="ltr">
<h3 align="center" style="color:#804000;font-size:large;margin-top:0px;"><strong>
<img height="auto" width="200%" src="http://www.ghadaalsamman.com/new/images/image21.png">
</strong></h3>
</marquee>
</div>
<a class="button" id="btn1" href="http://ghadaalsamman.com/new/site.html"></a>
</div>
</div>
This is the problem
body {
width: 100%;
hight: 100%; <----- 'hight' make it 'height'
margin: 0;
padding: 0;
}
Replace with this
body {
width:100%;
height:100%;
margin: 0;
padding:0;
}
the ratio of your image will make it difficult i believe.
Since you started using vw units, maybe it's an hint to use vh units and max-width too.
Because of your image, too much like a square, the container needs too be a bit smaller to stay in sight. Because of , vw units, i would propose to use display:fle to easily center you container :
DEMO of my idea
CSS updated :
html {
height: 100%;
width: 100%;
}
body {
width:100%;
height:100%;/* UPDATED*/
margin: 0;
padding:0;
display:flex;/* UPDATED*/
}
.main {
background-image: url("http://www.ghadaalsamman.com/new/images/bg.gif");
background-repeat: no-repeat;
background-position: center center;
margin: 0;
padding-top: 15vh;/* UPDATED*/
background-size: 100%;
width:100vh;/* UPDATED*/
margin:auto;/* UPDATED*/
max-width:100vw;/* UPDATED*/
overflow:hidden;/* UPDATED hide marquee*/
}
.container {
display: block;
height: 100%;/* useless when parent has no height given */
margin: 0 auto;
position: relative;
}