While converting a page to responsive layout, css style resets after 620px breakpoint. The affected design part is as follows. Please note the following snippet working perfectly and given only to describe what I'm doing. The problem occurs only if it is combined with the full code.
.tfulltiny{
float: left;
width: 100%;
padding: 20px 0 20px 0;
}
.tblocktiny{
float: left;
text-align: left;
margin-top: 10px;
}
.tcelltiny{
float: left;
text-align: left;
color: #609;
font-weight: bold;
}
#media only screen and (min-width: 680px) {
body {
margin:0 40px 0 40px;
}
.tblocktiny{
width: 16%;
}
.tcelltiny {
width:100%;
}
}
#media only screen and (max-width: 680px) {
.tblocktiny{
width: 99%;
}
.tcelltiny {
width:100%;
}
}
<div class="tfulltiny">
<div class="tblocktiny">
<div class="tcelltiny">
<span>Planet</span>
</div>
</div>
<div class="tblocktiny">
<div class="tcelltiny">
<span>Longitude (Deg:Min:Sec)</span>
</div>
</div>
<div class="tblocktiny">
<div class="tcelltiny">
<span>Rasi</span>
</div>
</div>
<div class="tblocktiny">
<div class="tcelltiny">
<span>Longitude (Deg:Min:Sec)</span>
</div>
</div>
<div class="tblocktiny">
<div class="tcelltiny">
<span>Star</span>
</div>
</div>
<div class="tblocktiny">
<div class="tcelltiny">
<span>Pada</span>
</div>
</div>
</div>
Expected output after 680px screensize:
But suddenly the style disappears while crossing 620px+
The full code is so big so I cant include it here, may be the bug is in that code. However I want information on what makes styling disappear. What are the possible issues and how to resolve this?
Edit :
After searching, I found 620px width used 2 times in code. Don't know it have some role in this error.
#media only screen and (min-width: 620px) {
.tblocksml{
width: 49%;
}
.tcellsml {
width:99%;
}
}
#media only screen and (max-width: 620px) {
.tblocksml{
width: 99%;
}
.tcellsml {
width:99%;
}
}
Try this https://jsfiddle.net/2Lzo9vfc/118/
CSS
#media only screen and (max-width: 680px) {
.tblocktiny{
width: 99%;
margin-top: 0;
}
.tcelltiny {
width:100%;
color: black;
font-weight: normal;
}
}
Other solution https://jsfiddle.net/2Lzo9vfc/119/
#media only screen and (min-width: 680px) {
body {
margin:0 40px 0 40px;
}
.tblocktiny{
width: 16%;
margin-top: 10px;
}
.tcelltiny {
width:100%;
color: #609;
font-weight: bold;
}
}
Finally found a fix to this problem. Actually it is just a trick, not a proper solution. The problem occurring due to #media overlaps. So the part which faces problem must be added first place in the code. That is, cut-paste the misbehaving code in top of css and the problem will be solved. However I know this is not a proper method, but it works for me. I'll change this answer from best when better answer arrives.
Related
I have a navigation bar which has padding to allow content to display under the navigation bar. For mobiles I want to lessen the padding but the media query doesn't seem to work. Any ideas to why?
Example:
body{
padding-top: 70px;
}
p.t{
color: white;
background-color: black;
top: 0px;
position: absolute;
}
#media only screen and (max-width: 767px) {
.body {
padding-top: 0px;
}
}
<body>
<p class="t">
This is my pretend navbar woo.
</p>
<p>
hello
</p>
</body>
You're doing .body instead of body. By using .body, the CSS is searching for an element with class="body", instead of an element <body>. Simple fix:
#media only screen and (max-width: 767px) {
body {
padding-top: 0;
}
}
I have a clickable image on my desktop website theme which showed on mobile screens. I’ve managed to remove the image with the following code but it has left a ‘ghost’ link which users don’t see but if touched takes them to the linked page:
In footer.tpl
<div id="footer">
<div class="column">
In stylesheet.css
#test {
#media screen and (max-width: 480px) { image display: none; }
background-image: url('../image/myimage.png');
background-repeat: no-repeat;
position: absolute;
margin-top: 10px;
margin-left: 20px;
width: 75px;
height: 75px;
Is there any way the link could also be removed? Thanks in advance.
Give your element a display:none; on the media query.
#test {
display: block;
background-image: url('../image/myimage.png');
background-repeat: no-repeat;
position: absolute;
margin-top: 10px;
margin-left: 20px;
width: 75px;
height: 75px;
background: whitesmoke; /** Testing purposes **/
}
#media all and (max-width: 480px) {
.hide {
display: none;
}
}
<div id="footer">
<div class="column">
Your CSS doesn't seem properly formed. Try replacing your media query with the following, which selects and hides your link by id:
#media screen and (max-width: 480px) {
#test {
display: none;
}
}
Right now your media query looks invalid.
To hide the link, you could do this:
#media screen and (max-width: 480px) {
#test {
display: none;
}
}
Note that this will override the display style of your #test element.
Suggestion: You may want to use a css class instead, such as <a class="hidden-mobile"... and use .test in your css file instead, so that you can reuse your class multiple times.
Okay, I've got it resizing nicely for devices using a media query. Now I need to reproduce this on a browser resize. Is it possible using only CSS? I'm trying to avoid multiple named divs for scalability (i.e. add another change the min-width etc and it'll still work)
Yes, this may well have been asked before (I really have hunted), but there's just so many ways of framing the question...please indulge me .
The media query with viewport turns the divs into columns of a specific size.
But how on earth do I do this during a browser resize?
If you view this result on device via Chrome inspect etc my point will be abundantly clear.
Thanks all!
#Page {
margin: 0 auto 20px;
width: 98%;
/*1000px*/
background-color: lightgray;
}
#content {
margin: 0 auto 10%;
width: 96%;
background-color: green;
max-width: 1100px;
}
.col_content {
float: left;
margin: auto 1%;
width: 30%;
background-color: pink;
min-width: 225px;
}
#media only screen and (max-device-width: 768px) {
#Page {
background-color: white;
}
#content {
max-width: 400px;
background-color: green;
}
.col_content {
float: none;
margin: 1%;
/*5px*/
width: 100%;
background-color: pink;
}
}
<div id="content">
<!--Content-->
<div class="col_content">
1
</div>
<!--end col_content-->
<div class="col_content">
2
</div>
<!--end col_content-->
<div class="col_content">
3
</div>
<!--end col_content-->
</div>
<!--end content-->
Try changing:
#media only screen and (max-device-width: 768px) {
to
#media screen and (max-width: 768px) {
I use the above on my website and it works on browser resizes and on devices.
I am trying style a div so that its width decreases after a certain point wrt to the width of the viewport.
Here is my code:
<div data-category="budget" class="hotels-block active ">
<img src="images/budget1.jpg">
<div class="info-block">
<h2>BUDGET HOTEL 1</h2>
<p>fist line, second line, USA, third line comes over here</p>
<hr/>
BOOK NOW
</div>
</div>
CSS :
.hotels-block {
overflow: hidden;
margin-bottom: 30px;
}
.hotels-block img {
float:left;
}
.info-block {
width: 320px;
float: left;
display: inline-block;
background-color: #62bcb1;
text-align: center;
color: #FFF;
margin-bottom: -9999px;
padding-bottom: 9999px;
}
#media screen and (min-width: 961px) and (max-width: 1050px)
{
.info-block
{
width: 30%;
}
}
I want the width of the .info-block div to reduce until the viewport width hits 961px.
Currently, .info-block shrinks until 977px and then falls to the next line.
How do I prevent .info-block from going to the next line? No JS/JQuery please.
you want to use min-width and max-width properties? usually as absolutes and then set the standard width to a percentage. Also set the width in the media query to !important to supersede the pre-set arrangement.
#media screen and (min-width: 961px) and (max-width: 1050px)
{
.info-block
{
min-width:200px;
width: 30% !important;
max-width:400px;
}
}
I am attempting to implement a responsive layout based on the exmaples and code here: www.responsivegridsystem.com
I have wrapped it a couple of containers as I need a 960px content area centered in a 1000px container.
My intent is that with a width smaller then 960px, both containers just become 100% width. The layout is exactly what I want at full size, but it is not shifting like I want when smaller then 960px.
Current CSS (with some edits based on suggestions, still not working.):
.masterContainer {
position:relative;
margin:0 auto;
margin-top:-10px;
background-color:#FFF;
width:1000px;
overflow: hidden;
}
.pageContainer {
position:relative;
display:table;
margin:0 auto;
width:960px;
overflow:hidden;
}
/* SECTIONS */
.section {
clear: both;
padding: 0px;
margin: 0px;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
}
.col:first-child { margin-left: 0; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
/* GRID OF THREE */
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 70%;
}
.span_1_of_3 {
width: 30%;
}
#media only screen and (min-width: 481px and max-width: 960px) {
.masterContainer {
width:100%;
}
.pageContainer {
width:100%;
}
}
#media only screen and (max-width: 480px) {
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 100%;
}
.span_1_of_3 {
width: 100%;
}
}
HTML
<div class="masterContainer">
<div class="pageContainer">
<div class="section">
<div class="col span_3_of_3" id="header">Header
</div>
<div class="col span_3_of_3" id="slideshowContainer">Slideshow
</div>
</div>
<div class="section group">
<div class="col span_2_of_3" id="contentArea">
This is column 1
</div>
<div class="col span_1_of_3" id="rightColumn">
This is column 2
</div>
</div>
<div class="col span_3_of_3" id="footer">Footer
</div>
<div class="col span_3_of_3" id="bottom">
</div>
</div>
</div>
Is something wrong with my #media code or did I break it somewhere else?
Your media queries are telling IDs to do something, while your HTML has them as classes. Change it to something like this:
#media only screen and (max-width:960px){
.masterContainer {width: 100%;}
.pageContainer {width: 100%;}
}
Here is a fiddle with your code and the query. I gave them background colors for the example.
JS Fiddle with your code
From what you've posted there is no #media codes... You cannot have a specific width's set if you intened for the page to be responsive ex. masterContainer width 1000px.. youll need to redo that for example:
#media (min-width: 700px), handheld and (orientation: landscape)
{
.masterContainer{
width:60%; // or whatever you may need
}
}
have a look at some examples.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
You need to specify it via #media queries:
#media screen and (max-width: 959px) {
.masterContainer,
.pageContainer {
width: 100%;
}
}
You dont have media queries in your css.
Create separate files for diffrent screen sizes and put styles in there. Thats the easiest way.
And read this article. It will help you to understand how media queries work.
csstricks media queries
The reason it doesn't work is this:
#media only screen and (min-width: 481px and max-width: 960px) that is a wrong query.
It should be:
#media screen and (min-width:481px) and (max-width:960px)
You can't combine the min and max like you had it.