I have a header in my web page with white background color. it works properly in PC monitors. but in mobile phones, the result is something like this:
http://uupload.ir/files/j0ki_screen_shot_2015-10-10_at_19.44.32.png
when I scroll the page to left, half of my header doesn't exist.
http://uupload.ir/files/o0j3_screen_shot_2015-10-10_at_19.50.36.png
my code is here:
<style type="text/css">
.my-header-box{
width:100%;
background-color:#fff;
border-bottom:1px solid #4ba028;
}
.my-header-wrapper{
width:100%;min-width:940px;max-width:1280px;
height:200px;
/*border:1px solid #ff0000;*/
margin:0 auto;
}
.my-logo img{
max-width:300px;
max-height:90px;
}
</style>
<div class="my-header-box">
<div class="my-header-wrapper">
</div>
</div>
You've fixed a width - min-width for .my-header-wrapper, which is why you are seeing it that way on smaller devices.
.my-header-wrapper{
width:100%;
max-width:1280px;
height:200px;
margin:0 auto;
}
Otherwise, use media query for devices with 939px or less pixels devices.
#media only screen and (max-device-width: 936px){
.my-header-wrapper{
min-width: 100%;
}
}
In your css min-width:940px is the main reason it`s happening.
If you want to make the website more responsive when viewing it in mobile devices try using css media queries
See a simple tutorial here
W3Schools tutorial
And if you really want deep understanding then this will be major help:
CSS-tricks - Media Queries
CSS tricks is going to be real helpful for learning anything around CSS
Related
I am fairly new to coding and need some help. I have a bootstrap website where the slider does not re-size to mobile devices or tablet sizes.
The code in the CSS I have added are:
img{ max-width: 100%;}
iframe{ border: 0; width: 100%;}
and
what am i doing wrong?
.img{
width: ....;
height: ....;
}
#media all and (min-width:900px){
.img{
width:....;
height:....;
}
}
so this is css code. the first .img by itself is what it will look like on a phone for example, the # media tags is what you use to change the size of stuff when the screen size gets above the min-width size. I suggest using firefox as it has a nice responsive view so you can change the screen size to see what it will look like on a smaller screen
I am creating a website with Wordpress.
I need to make a ImageMap plugin responsive. The only solution is to make it scrollable on Mobile devices. Because if image is made resposive with width:100%; and overflow-x:scroll; its also scrollable on Dekstop.
I tried also with: #media screen and (min-width:360px) and (max-width: 480px). Thought maybe there was problems in this code, so searched and tried every answer from stackoverflow.com, didn't helped. My Site
Made a ticket for that plugin, but I need fast answer, client is waiting.
How to achieve scrolling in mobile only, while dekstop responsive using CSS?
#media screen and (min-width:360px) and (max-width: 480px){
#image-map-pro-3521{
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow-x:scroll;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
}
.container {
position:relative;
width:100%;
overflow-x:scroll;
}
}
#image-map-pro-3521{
width: 100%;
height: 100%;
left: 0px;
top: 0px;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
}
.imp-wrap{
min-width:100%; min-height:100%; width:auto; height:auto;
}
.container{
position:relative;
width:100%;
padding:0;
margin:0;
}
.container .row {
margin:0;
}
css works top down and something further down will over wright something higher in the page. So what you have is
#media screen and (min-width:360px) and (max-width: 480px){
#image-map-pro-3521{
overflow-x:scroll;
}
#image-map-pro-3521{
overflow-x:hidden;
}
so whatever happens overflow-x will always be hidden as it is not surrounded by an conditional statement and is further down the page. So to fix it either put the #media stuff at the bottom of the css or put a conditional statement around the general stuff. The better option is to rearrange the css unless you expect browsers who cant process #media tags.
side note: why are you concerned about the min width? dose anything different happen under 360px wide? if not then you dont need the min width statement, this should save a little bit of bandwidth and help the page load a tiny bit faster.
I use media query and i want content on my web page be responsive.
is this code ok?
#media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3){
.navmob{margin-top:0px; margin-left:-100px; margin-right:100px !important; }
.sidebar { display: none; }
#navmenu {margin-top:10px; margin-left:auto; margin-right:100px; }
.content {width:auto; height:auto; margin-left:100px; margin-top:-50px;}
.contentsing{ width:500px; height:auto; margin-left:auto; margin-right:auto; margin-top:-50px !important;}
body{
background-image:none !important;
background-color:#000000 !important;
font-size:12px !important;
}
}
and why content is not responsive... Here is example
Here is code of my index
There is allot of bugs i found in console. Any way i cannot solve all of them but i can tell you, you need to work on width when you make a template responsive. These are some css line from i try to manage your template, Hop that help you
Put them as it is
#media(max-width:714px){
.posts .post-item{width:96%}
.text5{width:100%}
#navmenu ul{width:90%}
}
If you are testing your responsiveness by resizing your browser, device-width will not take effect. This is because the width of your computer screen does not change.
Use max-width/min-width. It targets the rendering area on the screen, therefore, when you resize, the CSS will take effect.
device-width targets the screens resolution.
max-width/min-wdith targets the screens rendering area.
This is the wrong way to go about a responsive website. You need a series of media queries to cater for:
desktop 1024px
ipad 768px
iphone 320px
Once you have these breakpoints set up the site will respond as expected, all content needs to be set to % in terms of width so it can adjust accordingly. Also do not use px use em for font sizes as this will auto re adjust for you.
Look into using a front end framework such as bootstrap as this does a lot of the hard work for you by using a 12 column grid layout system.
So what i want to achieve is that 1000px main screen and at the right, ad space
If visitor screen width is smaller than 1160 ad screen won't be visible unless visitor scrolls right
But i want to margin things according to the main screen not total of ad place and main screen
Is this kind of positioning possible without javascript ?
Ok here the picture
You need to look at media queries, in particular the width feature.
This allows you to customize the CSS according to the available width.
#media screen and (min-width: 1160px) { … }
It's posible using CSS #media I prefer to use percentages but here's an example:
#page{
width:80%;
margin:0% 9% 0% 10%;
}
#left{
display:inline-block;//alternative needed for ie 8 and below
width:80%;
}
#right{
width:19%;
display:inline-block;
}
#media screen only and (min-width:1160px){
#right{
display:none;
}
#left{
width:100%;
}
}
If the user's has a screen resolution width smaller than 1160px; The CSS properties of the elements will be altered.
Right now I have a website which has an overall height set at 750px. I have it vertically centered using the position absolute and negative margin method. It works great apart from one problem.
If I try use it on a lower-res monitor or mobile device it cuts the top of the page.
Here is my code
HTML
<body>
<div class="content">
CONTENT IS HERE
</div>
</body>
CSS
.content {
position:absolute;
top:50%;
height:750px;
margin-top:-375px; /* Half of 750px */
}
I tried using overflow:scroll; on the body tag but I understand that it doesn't work, I didn't expect it to. I am totally stumped! Is there any suggestion?
You can overwrite it with a mediaquery on small screens:
.content {
position:absolute;
top:50%;
height:750px;
margin-top:-375px;
}
#media only screen and (max-height: 750px){
.content {
top:0;
margin-top:0;
}
}
Actually, this is a graceful degradation method, but if you're designing for mobile you probably want to approach in a progressive enhancement way. In that case, it becomes:
.content {
height:750px;
}
#media only screen and (min-height: 751px){
.content {
position:absolute;
top:50%;
margin-top:-375px;
}
}
Speaking about compatibility, the only keyword after #media prevent older browsers from rendering the rules contained.
To reach (almost) full compatibility, you can use this very useful plugin: respond.js
As far as scrolling goes,
overflow:auto;
is probably what you want as that will cause the scroll bars to appear.
This overall problem you are having is why sizing is almost always done relatively. Either relative with percentages, or relative with javascript to determine the clients viewable area.
Also note that,
.class {
does not match the definition you have class="content". This is a logical error and should be replaced with
.content {
Try something like
margin-top:-25%;
So that it will be the same at any browser window height
And the same for the height, use a combination of percentages, not pixels.