I have been having some real issues with CSS!
I have the following set up to centre the #Box div, which works perfectly on everything but mobile browsers. Because the screen size of the mobile browser is so narrow the left hand side keeps getting cut-off. I asked something similar previously and have tried to no avail to adjust it.
I have put the container and layout divs in since last time, but still the same problem occurs. Is there any way that I can adjust the code so that the left hand side doesn't keep getting chopped off?
.pageContainer {
margin-left: auto;
margin-right: auto;
width: 100%;
height: auto;
padding-left: 1.82%;
padding-right: 1.82%;
position:relative; }
#LayoutDiv1 {
clear: both;
margin: auto;
width: 100%;
display: block;
text-align:center;
position: relative; }
#Box {
width: 487px;
height: 181px;
position: absolute;
left: 50%;
top: 236px;
margin-left: -244px;
z-index:6; }
The html:
<body>
<div class="pageContainer">
<div id="LayoutDiv1">
<div id="Twitter">
<img src="images/TwitterNORMAL.png" onmouseover="this.src='images/TwitterHOVER.png'" onmouseout="this.src='images/TwitterNORMAL.png'"/>
</div>
<div id="Facebook">
<img src="images/fbNORMAL.png" onMouseOver="this.src='images/fbHOVER.png'" onMouseOut="this.src='images/fbNORMAL.png'"/>
</div>
<div>
<img id="Box" src="images/BOX.png" width="487" height="181">
</div>
</div>
</div>
</body>
The smarter way in 2012 to do this is to use Media Queries, some inspiration here
You basically create another style sheet which is loaded only for smaller screens. It might seem like an overkill now, but as your website grows, you will thank me for suggesting this (or you cannot ;))
Also, don't do margin-left: -244px;, its hacky and can cause cross browser issues. Show us some HTML and we shall show you a cleaner way.
Are you including a viewport meta tag? It should eliminate any scaling issues you may be having in mobile.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
To you CSS: <div>s are block elements, and their default behavior is to expand the width of their parent (100%). Those CSS declarations aren't necessary.
From your code, and layout, it doesn't look like you need #LayoutDiv1 or to use positioning.
This simpler code takes care of the left-side-cutoff (here's a fiddle):
.pageContainer {
margin:0 auto;
}
#LayoutDiv1 {
margin: auto;
text-align:center;
}
#Box {
width: 487px;
height: 181px;
top: 236px;
margin:236px auto 0;
}
And like a prev poster mentioned, you could add a #media query to load a smaller image for #Box on mobile (you can simply add a line or two [or 200] to your existing CSS file):
#media only screen and (max-width: 767px) {
#Box { background:url('imgs/mobile-hero.jpg'); }
}
Related
Is it possible to reset font-size when slider is in 'responsive' mode?
I have a slider that woks very well until the screen size goes down below about 740px wide. Then type becomes almost impossible to read.
So I tried to override font-sizes with media queries. No luck. Turns out transform: scale(0.32298) - or some decimal like that - gets applied to one of the parent containers. Tried overriding that too, but didn't get far with that either.
Is there a 'canonical' way to preserve/override scaling effects? ... callbacks, etc.?
EDIT:
transform appears as an inline style:
<div style="position: absolute; top: 0px; left: 0px; width: 1024px; height: 654px; transform-origin: 0px 0px 0px; transform: scale(0.34454345703125);">
it appears in the first child of <div id="slider1_container"></div>
So, I think you have some content elements as below in any slide in your slider.
<div style="...font-size: 50px; ...">You text</div>
Please move inline styles to css block, and then you get following format,
<div class="classname">You text</div>
In this manner, you have chance to apply different font-size on various screen.
<style>
#media only screen and (max-width: 480px) {
.classname {
font-size: ...px;
}
}
#media only screen and (max-width: 768px) {
.classname {
font-size: ...px;
}
}
</style>
Ended up using cycle2 plugin. Turned out to be pretty flexible and was able to restyle contents with media queries without any issues whatsoever.
I've looked and looked for what should be a simple answer, and for some reason I can't find it.
I'm experimenting with this amazing slider gleaned from the example here. I'd be happy if mine looked like this, considering that my slider has larger images.
When I reset the code to accommodate the larger images I lost the entire thumbnail panel and its black background. Obviously I also lost the thumbnail navigation.
You can see from my page that I've added a border. Regardless of the container size, the thumbnails have disappeared either way.
I would be grateful if someone points me to the code or js that deals with this. I would also appreciate if someone gave me some idea about the many selectors such as .jssora05r and .jssora05rdn, none of which have any html equivalent and leave me wondering what purpose they serve or whether they can just be omitted.
Please use class name to define css for slider1_container.
.slider1_container {
position: relative;
width: 960px;
height: 628px;
/*border: 20px solid #E1D9CC;*/
overflow: hidden;
/*margin: 90px auto 0;*/
margin: 0 auto;
padding-bottom: 0;
}
And remove the following codes,
#media only screen and ( max-width: 1152px ) {
.slider1_container {
max-width: 92%;
border-width: 15px;
}
}
#media only screen and ( max-width: 800px ) {
.slider1_container {
margin-top: 10px;
border-width: 10px;
max-width: 90%;
}
}
#media only screen and ( max-width: 640px ) {
.slider1_container {
border-width: 5px;
}
}
And also, jssor.js is missing in your code. Please replace
<script src="../js/jssor.slider.js" type="text/javascript"></script>
with
<script src="../js/jssor.js" type="text/javascript"></script>
<script src="../js/jssor.slider.js" type="text/javascript"></script>
Edit
<div id="slider1_container" class="slider1_container" ...
Move thumbnails
Slides are always in slides container. If you make slides container smaller than slider1_container, then you have rest space to place your thumbnail navigator. You can use css to set position of your thumbnailnavigator, for example
<div u="thumbnavigator" class="jssort01" style="left: 0px; bottom: 0px;">
Reference:
http://www.jssor.com/development/tip-arrange-layout-adjust-size.html
http://www.jssor.com/development/reference-ui-definition.html
My footer and other container divs seem unaligned in iPhone Safari (it looks OK on Android):
Nothing had worked so far. What could be the cause?
CSS:
html,
body,
#wrapper {
height: 100%;
}
body > #wrapper {
height: 100%;
min-height: 100%;
}
#content {
clear: both;
padding-bottom: 36px;
}
#header,
#content,
#footer {
padding-left: 20px;
padding-right: 20px;
}
.container {
margin: 0 auto;
width: 960px;
}
#footer {
background: url(images/footer_bg.png) repeat-x 0 0;
margin: -65px 0 0;
padding: 15px 0 14px;
position: relative;
clear: both;
height: 36px;
}
Live site:
http://www.pixelmatic.com/index-2/
You haven't really defined clear wrappers for your content sections, which makes this a bit harder to get everything to align. You could put some left padding on the left footer element if you wanted to move it over a bit, as it doesn't look great right up against the edge of the screen.
Anyhow, the section with the quote marks (top pink arrow in your image) is moved right by 4px because of the left margin of 4px on the latest-news div. You'll see the same thing by narrowing your desktop browser.
First I think it's the difference between the android and ios browser that will explain the difference between the browsers. Mobile browsers use zooming to fit a website to the device screen. Source: http://davidwalsh.name/zoom-mobile-browsers
<meta name="viewport" content="user-scalable = yes">
I think it's better to change it, so that the browser zooming is removed.
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1">
Second: there is an extra css rule that overrides your .container:
.page-template-front-page-2-php .container {
width: 971px !important;
}
Maybe the css rule is forced to fit the screen.
The .container contains floating elements. De #content .container uses a overflow: hidden, but the #home-feed and #footer .containers doesn't have this declaration. The overflow: hidden will force the parent div to "see" that there is content inside. There are some disadvantages, but maybe it will do the trick.
Extra tip: why don't you use a css framework with a grid system like Twitterbootstrap, Foundation or Groundwork ?
I want to make a 100% width div in a 300px container, how is it posible? tryed postiton relative and absoulte with no success.
.container { margin:0 auto; text-align:center; background-color:black; width: 300px;}
.normalOne { background-color:grey; height: 50px;}
.hundredProcent { background-color:blue; height: 50px; width:100%;}
.normalTwo { background-color:red; height: 50px;}
<div class="container">
<div class="normalOne"></div>
<div class="hundredProcent"></div>
<div class="normalTwo"></div>
</div>
And here is a fiddle http://jsfiddle.net/lamberta/2U893/
I've added one addition div inside div.hundredProcent with following style:
style='position:absolute; background-color:yellow; height: 50px; width:100%;left:0px;'
Check this updated fiddle. You should not set position:relative to .container or
.hundredProcent div's
You can't do that by CSS alone. Use Javascript; something like this
document.getElementsByClassName('hundredProcent')[0].style.width =
document.body.clientWidth+'px';
for instance in the onload handler.
Make sure it works on all browsers that you need it to work on. I'm not even sure if getElementsByClassName is implemented in all modern browsers, so you may need to give the div an id to positively identify it.
So having a little browser compatibility issue, but only on the iPhone and iPad Safari browsers :(
Site: http://s433108212.onlinehome.us
My client wanted the space background in the header to stretch past the 1000px area I have set for the header. So my solution was to just create another wrapper that went 100% with a background:repeat-x image of the space to tile.
Well it works in every single browser on PC and Mac, except for the iPhone and iPad, it's really puzzling me because it looks like in the screenshots below that the tiled background image in the space_stretch_bg wrapper is 1) pushed over to the left and 2) not tiling so 3) you see white behind the 1000px fixed banner above it :/
Anyone else run into this?
CSS:
body {
width: 100%; margin: 0 auto;
background-image:url('../img/clouds.jpg');
background-repeat:repeat;
}
.wrapper_bg {
position: absolute;
width: 100%; height: 350px;
background-image:url('../img/bg_tile.gif');
background-repeat:repeat-x;
}
.space_stretch_bg {
position: absolute;
top: 100px; width: 100%; height: 250px;
background-image:url('../img/space_banner_big.jpg');
background-repeat:repeat-x; background-position:center;
}
.container1000 {
position: relative;
width: 1000px; top: -100px;
margin:auto;
}
#content_container {
position: absolute;
overflow: hidden;
top: 350px; padding: 20px;
background: #fff
}
Shortened HTML:
<body>
<div class="wrapper_bg">
<div class="space_stretch_bg">
<div class="container1000">
<!-- nav_bar -->
<div id="banner">
<a href="http://s433108212.onlinehome.us/index.php" title="Athena's Web">
<div class="logo">
<h1>Athena's Web</h1>
<h2>Carpe Noctem</h2>
<img src="http://s433108212.onlinehome.us/img/athenas_web_logo_no_text.png" alt="Athena's Web Carpe Noctem"/>
</div>
</a>
<div id="social_media">
<!-- social_icons -->
</div><!-- social_media -->
</div><!-- banner -->
<!-- End Header -->
First of all: it's because of wrapper_bg background that gets smaller. It's behind space_stretch_bg. Give wrapper_bg min-width: 1000px because your content_container is 1000px.
You can see the white space also on your pc browser if you make the browser smaller.