I'm trying to make like tablet with iframe. (Demo: http://tab.vn-rp.cz/). In some resolution it look fine, but when I drag window and start chaning resolutions, it get worse and iframe gets out of svg border around. I just have an ugly code below:
/*iPhone4 iframe*/
html, body {
margin: 0;
height: 100%;
overflow: hidden;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
}
#media only screen and (max-height: 1000px) {
#iphone4 {
background-image: url("Tablet.svg");
background-repeat: no-repeat;
height: 100%;
width: 60%;
margin: auto;
position: relative;
}
#browser {
height: 85.8%;
width: 96%;
position: absolute;
top: 2.4%;
border-radius: 3%;
left: 2.1%;
border: 0;
}
}
#media only screen and (min-height: 1000px) and (max-height: 1070px) {
#iphone4 {
background-image: url("Tablet.svg");
background-repeat: no-repeat;
height: 100%;
width: 65%;
margin: auto;
position: relative;
}
#browser {
height: 75.2%;
width: 96%;
position: absolute;
top: 2%;
border-radius: 3%;
left: 2.1%;
border: 0;
}
}
#media only screen and (min-height: 1070px) {
#iphone4 {
background-image: url("Tablet.svg");
background-repeat: no-repeat;
height: 100%;
width: 60%;
margin: auto;
position: relative;
}
#browser {
height: 76.9%;
width: 96%;
position: absolute;
top: 2.2%;
border-radius: 3%;
left: 2.1%;
border: 0;
}
}
#media only screen and (max-height: 1000px) {
.panilek {
position: absolute;
width: 97%;
margin-top: 825px;
margin-left: 20px;
}
.back {
position: absolute;
width: 1.5%;
margin-top: 830px;
margin-left: 300px;
}
.home {
position: absolute;
width: 1.6%;
margin-top: 830px;
margin-left: 550px;
}
.right {
position: absolute;
width: 1.9%;
margin-top: 833px;
margin-left: 800px;
}
}
#media only screen and (min-height: 1000px) and (max-height: 1070px) {
.panilek {
position: absolute;
width: 97%;
margin-top: 782px;
margin-left: 20px;
}
.back {
position: absolute;
width: 1.5%;
margin-top: 790px;
margin-left: 240px;
}
.home {
position: absolute;
width: 1.6%;
margin-top: 790px;
margin-left: 520px;
}
.right {
position: absolute;
width: 1.9%;
margin-top: 790px;
margin-left: 785px;
}
}
#media only screen and (min-height: 1070px) {
.panilek {
position: absolute;
width: 97%;
margin-top: 825px;
margin-left: 20px;
}
.back {
position: absolute;
width: 1.5%;
margin-top: 830px;
margin-left: 300px;
}
.home {
position: absolute;
width: 1.6%;
margin-top: 830px;
margin-left: 550px;
}
.right {
position: absolute;
width: 1.9%;
margin-top: 833px;
margin-left: 800px;
}
}
-- HTML Code
<body>
<br>
<br>
<div id="iphone4" class="w3-animate-bottom">
<iframe name="browser" id="browser" src="http://tab.vn-rp.cz/page.html"></iframe>
<img class="panilek" src="http://tab.vn-rp.cz/panilek.svg" />
<img onClick="back();" style="cursor:pointer;" class="back" src="http://tab.vn-rp.cz/leftbutton.svg" />
<img onClick="$('#browser').attr('src', 'http://tab.vn-rp.cz/page.html');" style="cursor:pointer;" class="home" src="http://tab.vn-rp.cz/homebutton.svg" />
<img onClick="$('#browser').attr('src', 'https://www.google.com/webhp?igu=1');" style="cursor:pointer;" class="right" src="http://tab.vn-rp.cz/rightbutton.svg" />
</div>
<script>
var canback = false;
function back(){
if(canback){
window.history.back();
}
}
window.onmessage = function(e){
if(e.data == "home"){
canback = false;
}
else if(e.data == "app"){
canback = true;
}
else {
alert("'" + e.data + "'");
}
};
</script>
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
</body>
Is there some more efficient way to do it? If so, I will be so happy! Have a nice day all!
Related
This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed last year.
I'm trying to add a kind of offset border to my img using z-index:-1. Using z-index:1 i get the border displayed on top and using z-index:-1 the border doesn't appear. I searched why could this happen and the most common answer was that positioning was missing and i have a position realtive in the div and position absolute on after. And i have position relative on my parent div and absolute in my after. I tried instead of using after making the outside border another div but doing this makes the image "dissapear".
Here is how the image looks with z-index:1
And how it looks with z-index:0
.styled-pic {
position: relative;
max-width: 300px;
}
.styled-pic::after {
position: absolute;
z-index: -1;
border: 2px solid;
border-color: rgb(114, 70, 184);
border-radius: 4px;
top: 40px;
left: 20px;
content: "";
display: block;
width: 300px;
height: 300px;
}
.about-image {
height: 300px;
width: 300px;
margin-top: 22px;
}
#media (max-width: 768px) {
.styled-pic {
display: block;
margin: auto;
width: 70%;
}
.about-image {
margin-top: 0;
}
}
#media (max-width: 425px) {
.about-image {
height: 262.5px;
width: 262.5px;
}
}
#media (max-width: 375px) {
.about-image {
height: 227.5px;
width: 227.5px;
}
}
#media (max-width: 320px) {
.about-image {
height: 189px;
width: 189px;
}
}
<div className="styled-pic">
<img
className="about-image"
src="https://www.lavanguardia.com/files/content_image_mobile_filter/uploads/2016/01/11/5fa2b91fa22c4.jpeg"></img>
</div>
Adding z-index:2 to the styled-pic class fixes it.
Final result:
.styled-pic {
position: relative;
max-width: 300px;
z-index: 2;
}
.styled-pic::after {
position: absolute;
z-index: -1;
border: 2px solid;
border-color: rgb(114, 70, 184);
border-radius: 4px;
top: 40px;
left: 20px;
content: "";
display: block;
width: 300px;
height: 300px;
}
I think you want to create something like this. Wait for a while I will upload the solution slowly.
code pen
https://codepen.io/ash_000001/pen/vYWdEjW?editors=1100
body {
background: pink;
padding: 30px;
}
.about-image{
height: 165px;
width: 275px;
}
div {
background: white;
height: 165px;
width: 275px;
position: relative;
}
div:after {
content: '';
background: transparent;
border: 1px solid white;
top: 7px;
right: 7px;
bottom: -7px;
left: -7px;
position: absolute;
z-index: -1;
}
<div><img
class="about-image"
src="https://www.lavanguardia.com/files/content_image_mobile_filter/uploads/2016/01/11/5fa2b91fa22c4.jpeg"></img></div>
See the modified code snippet below.
Added position: absolute; to the .about-image itself, so it preserves the context with the other absolute-positioned element (i.e. ::after pseudo element.)
.styled-pic {
position: relative;
max-width: 300px;
}
.styled-pic::after {
position: absolute;
z-index: 0;
border: 2px solid;
border-color: rgb(114, 70, 184);
border-radius: 4px;
top: 40px;
left: 20px;
content: "";
display: block;
width: 300px;
height: 300px;
}
.about-image {
position: absolute;
top: 0;
left: 0;
height: 300px;
width: 300px;
object-fit: cover;
margin-top: 22px;
z-index: 3;
}
<div class="styled-pic">
<img class="about-image" src="https://www.lavanguardia.com/files/content_image_mobile_filter/uploads/2016/01/11/5fa2b91fa22c4.jpeg" />
</div>
Try this below code
body {
font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.styled-pic {
position: relative;
max-width: 300px;
}
.styled-pic::after {
position: absolute;
z-index: 10;
border: 2px solid;
border-color: rgb(114, 70, 184);
border-radius: 4px;
top: 0;
left: -2px;
content: "";
display: block;
width: 300px;
height: 300px;
}
.about-image {
height: 300px;
width: 300px;
margin-top: 22px;
}
#media (max-width: 768px) {
.styled-pic {
display: block;
margin: auto;
width: 70%;
}
.about-image {
margin-top: 0;
}
}
#media (max-width: 425px) {
.about-image {
height: 262.5px;
width: 262.5px;
}
}
#media (max-width: 375px) {
.about-image {
height: 227.5px;
width: 227.5px;
}
}
#media (max-width: 320px) {
.about-image {
height: 189px;
width: 189px;
}
}
<div class="styled-pic">
<img
class="about-image"
src="https://www.lavanguardia.com/files/content_image_mobile_filter/uploads/2016/01/11/5fa2b91fa22c4.jpeg"></img>
</div>
I have a problem with my css file. The styles are not being applied for iPhone, instead I get the iPad queries applied for both iPhone and iPad. I have checked and checked for typos and cannot find any. Here is my css file for both iPad and iPhone queries:
css
/*MEDIA-QUERIES-iPAD////////////////////////////////////////////////////////////////////////////////*/
#media screen and (min-width: 768px) and (max-width: 1024px) {
body,
html {
position: fixed;}
#menu {display: none;}
#presentacion {
padding: 0;
position: fixed;
display: inline-block;
text-align: center;
top: 30%;
left: 50%;
transform: translate(-50%, -50%);
}
.buttons {
opacity: 1;
}
#previous {
background-position: 70px 45%;
-webkit-tap-highlight-color: transparent;
left: -90px;
width: 25%;
height: 100%;
z-index: 4;
position: absolute;
}
#next {
background-position: 110px 45%;
-webkit-tap-highlight-color: transparent;
right: -90px;
width: 25%;
height: 100%;
z-index: 4;
position: absolute;
}
#info {
font-size: 2em;
}
h1 {
line-height: 8vh;
font-size: 2.1em;
}
ul {
margin-right: 2em;
}
#front {
height: 750px;
}
#imagewrap {
top: 10%;
display: block;
margin: 0 auto;
width: 80%;
height: 80%;
}
#front {
background-color: red;
}
#header {
height: 8vh;
}
.sections {
width: 900px;
height: 500px;
margin: 0 auto;
overflow-y: hidden;
top: 5%;
padding: none;
}
.sections p {
font-family: Galliard;
display: block;
font-size: 1.1em;
line-height: 2em;
margin-bottom: 2em;
padding-right: 100px; /*important*/
padding-left: 100px; /*important*/
color: #666;
text-align: left;
}
#about.sections {
height: 650px;
}
#about.sections p {
padding-left: 125px;
padding-right: 125px;
}
.littleImages {
height: 125px;
width: 125px;
margin: 15px;
box-shadow: 0px 0px 15px 5px #dcdcdc;
}
}
/*MEDIA-QUERIES-iPHONE////////////////////////////////////////////////////////////////////////////////*/
#media screen and (min-width: 375px) and (max-width: 767px) {
#front {
z-index: 6;
margin: 50% auto 0;
height: 85%;}
#container {
position: relative;
height: 100vh;
width: 100vw;
background-color: green;
overflow-y: scroll;
text-align: center;
}
#imagewrap {
margin-top: 400px;
}
#header {
height: 20vh;
background-color: red;
}
.sections {
width: 900px;
height: 650px;
margin: 0 auto;
overflow-y: hidden;
top: 15%;
padding: 50px 50px 50px 50px;
}
.sections p {
font-family: Galliard;
display: block;
font-size: 1.1em;
line-height: 2em;
margin-bottom: 2em;
padding-right: 100px; /*important*/
padding-left: 100px; /*important*/
color: #666;
text-align: left;
}
.buttons {
opacity: 1;
}
#info {
font-size: 2em;
}
#about.sections {
height: 650px;
}
#about.sections p {
padding-left: 125px;
padding-right: 125px;
}
.littleImages {
height: 125px;
width: 125px;
margin: 15px;
box-shadow: 0px 0px 15px 5px #dcdcdc;
}
#previous {
background-position: 70px 45%;
-webkit-tap-highlight-color: transparent;
left: -90px;
width: 25%;
height: 100%;
z-index: 4;
position: absolute;
}
#next {
background-position: 110px 45%;
-webkit-tap-highlight-color: transparent;
right: -90px;
width: 25%;
height: 100%;
z-index: 4;
position: absolute;
}
}
I don't see any clear typos or mistakes that would prevent the code from running. Why would the media query not work? Any help appreciated. Thank you.
Could this be due to not setting a viewport: https://www.w3schools.com/css/css_rwd_viewport.asp At least I don't see any viewport in your code.
Also; I've always learned to have separate stylesheets per screentype; it's easier to maintain and mobile users don't have to pull in the unnecessary IPad css.
To do this I place my mediaqueries inbetween the head tag together with a viewport. Each mediaquery is linked to a separate .css file
Here's an example of an HTML file that uses two styles. I believe you can expand mediaqueries by using 'and' which will allow you to use a specific stylesheet for a screensize between a min and max.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<link rel="stylesheet" href="reset.css" type="text/css"> <!-- My CSS reset -->
<link rel="stylesheet" href="style.css" type="text/css"> <!-- My main style, also for PC... -->
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile_style.css" /> <!-- Mediaquery that detects mobile screens and serves them the other stylesheet-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <!-- viewport -->
</head>
<body>
<p>Responsive text goes here.</p>
</body>
</html>
I Have One Div Which is Again Divided into 3 Div's. I Want to make these Div's responsive.
Snippet is given Below . Also I tried to Make Position Relative but this is not Working.
#upleft {
width: 34%;
height: 336px;
background: red;
float: left;
position: relative;
}
#upright {
width: 33%;
height: 336px;
background: blue;
float: left;
position: relative;
}
#below {
height: 337px;
width: 33%;
background: green;
float: right;
position: relative;
}
.test {
width: 100%;
height: 317px;
background: #f3f3f3 none repeat scroll 0 0;
box-shadow: 0px -10px 9px -11px rgba(0, 0, 0, 0.5);
position: relative;
z-index: 3;
top: 181px;
left: 0px;
height: 338px;
width: 100%;
}
<div class="test">
<div id="upleft">a1</div>
<div id="upright">a2</div>
<div id="below">a3</div>
</div>
please help
Use media queries:
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
#upleft { width: 100%; }
#upright { width: 100%; }
#below { width: 100%; }
}
/* Small Devices, Tablets */
#media only screen and (min-width : 768px) {
#upleft { width: 34%; }
#upright { width: 33%; }
#below { width: 33%; }
}
#upleft {
height: 336px;
background: red;
float: left;
position: relative;
}
#upright {
height: 336px;
background: blue;
float: left;
position: relative;
}
#below {
height: 337px;
background: green;
float : left;
position: relative;
}
.test {
width: 100%;
height: 317px;
background: #f3f3f3 none repeat scroll 0 0;
box-shadow: 0px -10px 9px -11px rgba(0, 0, 0, 0.5);
position: relative;
z-index: 3;
top: 181px;
left: 0px;
height: 338px;
width: 100%;
}
You could use a grid layout. You can define multiple widths for screen sizes : RWD
col-lg : large screen
col-md : middle screen
col-xs : small screen
#upleft {
width: 34%;
height: 336px;
background: red;
float: left;
position: relative;
}
#upright {
width: 33%;
height: 336px;
background: blue;
float: left;
position: relative;
}
#below {
height: 337px;
width: 33%;
background: green;
float: right;
position: relative;
}
.test {
width: 100%;
height: 317px;
background: #f3f3f3 none repeat scroll 0 0;
box-shadow: 0px -10px 9px -11px rgba(0, 0, 0, 0.5);
position: relative;
z-index: 3;
top: 181px;
left: 0px;
height: 338px;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="test">
<div id="upleft" class="col-sm-3 col-md-6 col-lg-4">a1</div>
<div id="upright" class="col-sm-6 col-md-6 col-lg-8">a2</div>
<div id="below" class="col-sm-9 col-md-6 col-lg-8">a3</div>
</div>
Change position:relative; in CSS of .test to position:absolute;.
.test{
...
position: absolute;
...
}
I am trying to figure out how to place the logo in the middle of the two sections of my landing page but only on the mobile view. The text class is for my logo. I cant seem to figure out the best way to do so.
.text {
position: absolute;
right: 70px;
left: 70px;
text-align: center;
z-index: 10;
margin: auto;
max-width: 600px;
}
Here is the codepen: http://codepen.io/anon/pen/xqQPVN?editors=1100
Just give it position:absolute and set it accordingly for mobile devies..
Added the following css in the case of mobile.
/* Logo In Center For Mobile Device*/
.logo-big {
display: block;
width: 100%;
position: absolute;
top: 500px;
margin-top: -75px;
}
Codepen link-http://codepen.io/sahildhir_1/pen/wJQxQy?editors=1100
Below is the snippet-
* {
box-sizing: border-box;
}
html,
body {
height: 100%
}
img {
max-width: 100%;
}
.item {
width: 50%;
float: left;
top: 0;
left: 0;
height: 100%;
z-index: 0;
overflow: hidden;
background-color: #000000;
background-position: center center;
background-size: auto 100%;
position: relative;
}
.overlay {
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.3);
transition: .2s linear;
}
.nurseryarea {
width: 100%;
position: absolute;
text-align: center;
top: 45%;
color: #fff;
font-size: 30px;
font-family: 'times new roman';
font-weight: bold;
transition: .2s linear;
}
::selection {
color: #ebebe3;
background: #222;
}
::-moz-selection {
color: #ebebe3;
background: #222;
}
.overlay:hover {
background-color: rgba(0, 0, 0, 0.1);
transition-property: background-color;
}
.overlay:hover .nurseryarea {
opacity: 1;
transition-property: opacity;
}
.logo-big {
display: block;
width: 100%;
}
.logo-big .svg {
display: block;
width: 100%;
height: auto;
}
.imgsize {
width: 40%;
}
.text {
position: absolute;
right: 70px;
left: 70px;
text-align: center;
z-index: 10;
margin: auto;
max-width: 600px;
}
#media screen and (max-width:600px) {
.nurseryarea {
width: 100%;
}
.imgsize {
width: 60%;
}
.text {
position: absolute;
right: 70px;
left: 70px;
text-align: center;
z-index: 10;
margin: auto;
max-width: 600px;
}
/* Logo In Center For Mobile Device*/
.logo-big {
display: block;
width: 100%;
position: absolute;
top: 500px;
margin-top: -75px;
}
.logo-big .svg {
display: block;
width: 100%;
height: auto;
}
.item {
width: 100%;
float: left;
top: 0;
left: 0;
height: 500px;
z-index: 0;
overflow: hidden;
background-color: #000000;
background-position: center center;
background-size: auto 100%;
}
}
<div class="text">
<a class="logo logo-big" href="http://www.lygonstnursery.com">
<img class="svg " src="https://www.lygonstnursery.com/wp-content/uploads/2017/03/NURSERY-landing-page.png" alt="Lygon Street Nursery">
</a>
</div>
<div class="item" style="background-image: url(https://www.lygonstnursery.com/wp-content/uploads/2017/02/LygonStNursery_Nursery-29.jpg);background-size:cover;">
<div class="overlay">
<div class="nurseryarea">
<img class='imgsize' src="https://www.lygonstnursery.com/wp-content/uploads/2017/03/nursery.png" ;>
</div>
</div>
</div>
<div class="item" style="background-image: url(https://www.lygonstnursery.com/wp-content/uploads/2017/02/LygonStNursery_Brunswick-24.jpg); background-size:cover;">
<div class="overlay">
<div class="nurseryarea">
<img class="imgsize" src="https://www.lygonstnursery.com/wp-content/uploads/2017/03/landscapes.png" ;>
</div>
</div>
</div>
If you want to have total control over the positioning i'd say go for progressively specific media queries (say: 425px, 375px, 320px) and use pixel positioning.
If you want to keep it generic, you must be prepared to have some small differences between these sizes, but you can use percentages and the result isn't so bad.
#media (max-width: 425px) {
.text {
position: absolute;
right: 34%;
left: 32%;
top: 34%;
}
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I need help with making my HTML fit all screen resolutions. I'd be glad if someone could help, I'll upload root folder. I've tried to make changes but it wont work.
Tried few different resolutions and it works only on 1920x1080 res.
Thanks
.html
{
background-color: #E6E6E6;
}
#page
{
z-index: 1;
width: 1000px;
min-height: 585px;
background-image: none;
border-width: 1px;
border-style: solid;
border-color: #E6E6E6;
background-color: #E6E6E6;
padding-bottom: 61px;
margin-left: auto;
margin-right: auto;
}
#pu27090
{
width: 0.01px;
padding-bottom: 0px;
position: relative;
margin-right: -10000px;
margin-top: 9px;
left: -54px;
}
#u27090
{
z-index: 24;
width: 217px;
margin-left: 52px;
position: relative;
}
#slideshowu5115
{
z-index: 2;
width: 0.01px;
height: 412px;
margin-top: 45px;
position: relative;
}
#u5142
{
position: absolute;
width: 1032px;
height: 412px;
background-color: transparent;
left: 38px;
}
#u5142popup
{
z-index: 3;
}
#u5143
{
z-index: 4;
width: 1032px;
height: 412px;
border-style: none;
border-color: transparent;
background-color: #4F4F4F;
margin-right: -10000px;
position: relative;
}
#u5190
{
z-index: 6;
width: 1032px;
height: 412px;
border-style: none;
border-color: transparent;
background-color: #4F4F4F;
margin-right: -10000px;
position: relative;
}
#u13904
{
z-index: 8;
width: 1032px;
height: 412px;
border-style: none;
border-color: transparent;
background-color: #4F4F4F;
margin-right: -10000px;
position: relative;
}
#u5208
{
z-index: 10;
width: 1032px;
height: 412px;
border-style: none;
border-color: transparent;
background-color: #4F4F4F;
margin-right: -10000px;
position: relative;
}
#u5217
{
z-index: 12;
width: 1032px;
height: 412px;
border-style: none;
border-color: transparent;
background-color: #4F4F4F;
margin-right: -10000px;
position: relative;
}
#u5226
{
z-index: 14;
width: 1032px;
height: 412px;
border-style: none;
border-color: transparent;
background-color: #4F4F4F;
margin-right: -10000px;
position: relative;
}
#u5235
{
z-index: 16;
width: 1032px;
height: 412px;
border-style: none;
border-color: transparent;
background-color: #4F4F4F;
margin-right: -10000px;
position: relative;
}
#u5143_clip,#u5190_clip,#u13904_clip,#u5208_clip,#u5217_clip,#u5226_clip,#u5235_clip
{
overflow: hidden;
width: 1032px;
height: 412px;
}
#u5143_img,#u5190_img,#u13904_img,#u5208_img,#u5217_img,#u5226_img,#u5235_img
{
margin-left: -3px;
margin-right: -3px;
}
#u5139-3
{
position: absolute;
width: 15px;
min-height: 20px;
border-style: none;
border-color: transparent;
padding: 10px;
line-height: 20px;
text-align: center;
color: #999999;
font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
top: 173px;
background: transparent url("../images/levo.png") no-repeat left top;
}
#u5139-3popup
{
z-index: 18;
}
#u5135-3
{
position: absolute;
width: 15px;
min-height: 20px;
border-style: none;
border-color: transparent;
padding: 10px;
line-height: 20px;
text-align: center;
color: #999999;
font-family: Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif;
top: 173px;
left: 1073px;
background: transparent url("../images/desno.png") no-repeat left top;
}
#u5135-3popup
{
z-index: 21;
}
.SSSlideLoading /* slideshowFreeStyle */
{
background: url("../images/loading.gif") no-repeat center center;
}
#menuu27092
{
z-index: 26;
width: 585px;
position: relative;
margin-right: -10000px;
margin-top: 62px;
left: 230px;
}
#u27093
{
width: 130px;
min-height: 31px;
position: relative;
margin-right: -10000px;
}
#u27096
{
width: 130px;
border-style: none;
border-color: transparent;
background-color: transparent;
padding-bottom: 13px;
position: relative;
}
#u27096.MuseMenuActive
{
border-style: none;
border-color: transparent;
margin: 0px;
background: transparent url("../images/kvacicaa.png") no-repeat left top;
}
#u27098-4
{
position: relative;
margin-right: -10000px;
top: 6px;
left: 44px;
}
#u27098-4_clip
{
overflow: hidden;
width: 42px;
height: 17px;
vertical-align: top;
}
#u27098-4_img
{
display: block;
}
#u27127
{
width: 161px;
min-height: 31px;
position: relative;
margin-right: -10000px;
left: 132px;
}
#u27128
{
width: 161px;
border-style: none;
border-color: transparent;
background-color: transparent;
padding-bottom: 13px;
position: relative;
}
#u27128:hover
{
margin: 0px;
background: transparent url("../images/kvacicaa.png") no-repeat left top;
}
#u27130
{
height: 17px;
width: 73px;
vertical-align: top;
background: url("../images/u27130.png") no-repeat 0px 0px;
position: relative;
margin-right: -10000px;
top: 6px;
left: 44px;
}
#u27128.MuseMenuActive #u27130
{
background: url("../images/u27130-a.png") no-repeat 0px 0px;
}
#u27120
{
width: 135px;
min-height: 31px;
position: relative;
margin-right: -10000px;
left: 295px;
}
#u27123
{
width: 135px;
border-style: none;
border-color: transparent;
background-color: transparent;
padding-bottom: 13px;
position: relative;
}
#u27128:active,#u27123:hover
{
margin: 0px;
background: transparent url("../images/kvacicaa.png") no-repeat left top;
}
#u27124
{
height: 17px;
width: 48px;
vertical-align: top;
background: url("../images/u27124.png") no-repeat 0px 0px;
position: relative;
margin-right: -10000px;
top: 6px;
left: 43px;
}
#u27123.MuseMenuActive #u27124
{
background: url("../images/u27124-a.png") no-repeat 0px 0px;
}
#u27113
{
width: 153px;
min-height: 31px;
position: relative;
margin-right: -10000px;
left: 432px;
}
#u27116
{
width: 153px;
border-style: none;
border-color: transparent;
background-color: transparent;
padding-bottom: 13px;
position: relative;
}
#u27123:active,#u27116:hover
{
margin: 0px;
background: transparent url("../images/kvacicaa.png") no-repeat left top;
}
#u27116:active
{
margin: 0px;
background: transparent url("../images/kvacicaa.png") no-repeat left top;
}
#u27117
{
height: 17px;
width: 65px;
vertical-align: top;
background: url("../images/u27117.png") no-repeat 0px 0px;
position: relative;
margin-right: -10000px;
top: 6px;
left: 44px;
}
#u27116.MuseMenuActive #u27117
{
background: url("../images/u27117-a.png") no-repeat 0px 0px;
}
.SSFirstButton,.SSPreviousButton,.SSNextButton,.SSLastButton,.SSSlideLink,.SSCloseButton,.MenuItem /* slideshowFreeStyle */
{
cursor: pointer;
}
body
{
padding-top: 35px;
}
#page .verticalspacer
{
clear: both;
}
if you are trying to make it fit in all the screen sizes. always use media queries.
Something like this will easy for you. its clean and simple
/* Tablet Landscape */
#media screen and (max-width: 1060px) {
#primary { width:67%; }
#secondary { width:30%; margin-left:3%;}
}
/* Tabled Portrait */
#media screen and (max-width: 768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
}
The easiest way to make your page fit all screens would be to use media queries which set specific rules depending on the width of the screen. Media queries are the magic behind responsive website design. I would suggest ready more about media queries and also you can use the query template below.
// Small screens
#media only screen { } /* Define mobile styles */
#media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles, use when QAing mobile issues */
// Medium screens
#media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */
#media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
// Large screens
#media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */
#media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
// XLarge screens
#media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */
#media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
// XXLarge screens
#media only screen and (min-width: 120.063em) { } /* min-width 1921px, xlarge screens */