Hi i working on this site http://sealonline.playrohan.com/main.html#&slider1=3
it seemed fine in the web browser but in mobile it looks different.
problem 1.
footer's background images repeat-x is not working.
div.load {height:12px; width:100%; background:url('/image/seal_common/footer_pt.gif') 0 0 repeat-x;}
problem2.
images is cut it out.
the villige image is more wide but is not showing.
div.villige {height: 124px; width:100%; text-align:center; background:url('/image/seal_common/bg_footer.png') 0 0 no-repeat bottom; display: block;}
problem 3.
middle section is not in the middle.
i already put this.
<meta name="viewport" content="width=device-width">
but it still doesn't work.
This is first web site using html 5.
can you try replacing your body css property margin: 0; to margin: 0 auto; first? then add some other styles to your body tag:
position: relative;
width: 100%;
max-width: <the max width of your background image>;
let me know what happens next.
Related
There's a white bar appearing below my image when i minimize the window, when its not minimize there's no white space. I've checked my background have no white spaces below it. The actual resolution of the picture is 1920x1080.
I believe its the background shrinking that's causing the problem. I might be wrong, but if i'm correct, how do i prevent the background from shrinking below its resolution?
I've tried background-size: cover/contain.
html, body{height: 100%;}
This is my current code:
`html, body{
height: 100%;
}
body{
margin: 0;
padding: 0;
font-family: 'Abel', sans-serif;
background: url(test2.jpg);
background-size: cover;
background-repeat: no-repeat;
}`
It's maybe because your html page is static. To enable "dynamic" mode you need to add this line in the head:<meta name="viewport" content="width=device-width, initial-scale=1.0">
I'm working on a project where I have a few button images that I'd like to automatically resize depending on the browser or screen size.
I've managed to get this in CSS with this code:
#nav {
max-width: 100%;
position: absolute;
top: 0%;
right: 0%;
width: auto;
height: auto;
z-index: 8;
}
img { max-width: 100%; height: auto; }
However I'd like it to also stretch horizontally from left to right. The image stick to the left side of the browser but when I increase the width of the browser it results with this:
I'd like to stretch the images all the way to the right as well if possible.
well, try to add to your <head> of the page following:
<meta name="viewport" content="width=device-width">
That should work. And if you want them to the center, just use
body {text-align:center;}
or img {margin-left:auto; margin-right:auto;}
So im using the foundation frameworks for my wordpress build. I cant seem to figure out why im getting this weird margin or padding on the right side when i drop down to tablet or mobile view.
Anyone ever seen this or know of a fix?
Heres my dev site. if you size the browser down to tablet or phone size and scroll to the left or right it will show up.
I'm using Chrome
body {
background: url(../img/dark-grungewall.jpg) repeat;
height: auto;
}
.site-container {
background: #fff;
box-shadow: 0.5px 0.866px 63px 0px rgba(0, 0, 0, 0.83);
width: 100%;
margin: 0 auto;
}
.row {
margin: 0 auto;
max-width: 100%;
width: 100%;
}
I wanna say the error is coming from my containing divs or body but im not really sure.
http://dev.solarinnovations.com/
This happened to me in the past when using the .row class from Bootstrap. Try putting overflow:hidden in the style part of the wrapper/container class and see if it fixes the issue.
In this part of your code, you set a max-width. This max-width is stopping the site from stretching across the entire window.
.row {
margin: 0 auto;
max-width: 87.5em;
width: 100%;
}
You can fix it by easily using:
max-width:100%;
I have problems with my website. There is displayed only one (first) image on website even if futher images will be this same (I mean this same src, just like to first one).
Website has section with image background.
Code:
#kafelobrazintro {
background: url(../images/introtablet.jpg) 50% 0 no-repeat fixed;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
box-shadow: 0 0 50px rgba(0,0,0,0.8);
overflow:hidden;
}
This is section with working img but even if I copy this css to another section, website will still display only one img.
Images on website are lower than 2 MPX, resolution: 1024 x 614 px, size less than 100kb.
If u have iPad check my website and get know what Im talking about :> Website display only first img :?
Why its not working?
Adress: http://www.badzlepszy.pl/Nebiolo/
The problem is with the background-attachment: fixed;. If you remove fixed the background images work.
Use media queries to change this property at the appropriate window sizes.
Still didnt solve the problem. First image on iPad displays, but futher ones dont.
If u have iPad u can check at: website
I created tableb.css just for iPads:
<link media="only screen and (device-width: 768px)" href="css/tablet.css" type= "text/css" rel="stylesheet" />
CSS for img section in tablets:
#kafelobrazintro {
background: url(../images/introtablet.jpg) 50% 0 no-repeat;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
box-shadow: 0 0 50px rgba(0,0,0,0.8);
overflow:hidden;
}
#kafelobraz1 {
background: url(../images/logomzblue.jpg) 50% 0 no-repeat;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
box-shadow: 0 0 50px rgba(0,0,0,0.8);
overflow:hidden;
}
Same problem was here with a little bit of difference. My div-s with background images were empty ( no text and no html content )
The solution here was adding: min-width: 1024; to these div-s.
( I tested your site with iPad Air and iPad 4th on http://www.browserstack.com/ and looks good )
I'm making attempts to build a responsive site however i'm am struggling with the resizing on the two background images i applied to my site. when i view on a mobile device the header looks squashed, i presume this is become a i applied a fixed height to the header. I have tried using the property height:auto, However still no joy.
can someone point out what i'm doing wrong?
#header{
background: url(images/page_header_1024px.png) no-repeat;
background-size: 100% 100%;
max-width:1024px;
min-height: 100%;
margin: 0 auto;}
click here
Write like this :
html, body{
height:100%;
}
#header{
min-height:100%;
}
Is there a reason you're not using a standard tag? Then the browser will natively resize it - try resizing this page (just your image in it's own window):
http://thisiswired.com/responsive/css/images/page_header_1024px.png
Is that the effect you want?