I have a hidden button it's means display:none. I tried with this.
#media screen and (max-width:1360px) {
#a10{display:none;}
#menu_btn{display:block;}
}
following code means: "display #menu_btn as inline-block when screen is more or equal to 1360, hide it when screen is less than 1360"
HTML:
<input id="menu_btn" type="button"/>
CSS:
#media screen and (min-width:1360px) {
#menu_btn { display:inline-block; }
}
#media screen and (max-width:1359px) {
#menu_btn { display:none; }
}
PS. remember that you cannot set inline style in html like this: <input id="menu_btn" type="button" style="display:none"/> because it will override style from media query and your button will not be displayed no matter what the screen size will be.
Related
I'm pretty new to advanced CSS. I have a custom heading section which i want to make centered on mobile only. I have added a class name and the following code but nothings happened.
.mobile-text {
text-align: right;
}
#media (max-device-width: 600px) {
.mobile-text {
text-align: center;
}
}
This is the homepage of this site and the paragraph is the following:
REAL ESTATE THAT CHALLENGES NORMS & ELEVATES EXPECTATIONS. THIS IS COLOURFUL THINKING IN A BLACK AND WHITE WORLD.
Your class on the website is .mobile-text, and it should be mobile-text - The . is only used in selectors to say that the following text is a class name
Also, your inline styles on the element ( style=font-size: 35px... etc ) is overwriting your changes - you can use !important to handle this lazily
.mobile-text {
text-align: right !important;
}
#media (max-device-width: 600px) {
.mobile-text {
text-align: center !important;
}
}
max-device-width will target the width of the entire device area (i.e the device screen). Instead use max-width, which will target the width of the entire browser area.
#media (max-width: 600px) {
.mobile-text {
text-align: center;
}
}
Note: device-width queries are deprecated.
When I check the html of your page I can see the class="" of this <h4>:
class="vc_custom_heading .mobile-text wpb_animate_when_almost_visible wpb_right-to-left right-to-left vc_custom_1580217248411 wpb_start_animation animated"
In your css you want to manipulate it using the .mobile-text class. Problem here is that you define this class in your html using .mobile-text. That's actually wrong, you need to define it with only mobile-text like this:
class="vc_custom_heading mobile-text wpb_animate_when_almost_visible wpb_right-to-left right-to-left vc_custom_1580217248411 wpb_start_animation animated"
The . is actually a css selector for a class like # is a selector for an id.
Your media query is not working on desktop if you are check in desktop view.
And also your class declaration is wrong please remove . from mobile-text. :)
max-width is the width of the target display area, e.g. the browser
max-device-width is the width of the device's entire rendering area, i.e. the actual device screen
Please use #media all and (max-width: 600px){}
For more details please visit here
Hope it will help you. :)
Good afternoon. I have a little problem that is causing me a headache. I have a DIV with an ID of 'booking-md' This changes size with media query and works well like so.
<div id="booking-md" class="container-fluid booking-md"></div>
and media queries change it like so:-
#media screen and (max-width:991px) {
.booking-md { height: 320px}
}
#media screen and (max-width:767px) {
.booking-md { height: 220px}
}
#media screen and (max-width:560px) {
.booking-md { height: 320px}
}
I also have a button which makes the 'booking-md' height bigger like so
<button type="button" onclick="ret()" class="btn btn-return">Return</button>
function ret() {
$('#booking-md').css('height', '175px');
$('#return').show()
}
Now this adds 50px to the size ok but when It resizes it does not use the original media queries to change size. Ideally I need to have 2 different sets of media queries, one for if button has been clicked and one if not.
I have tried this with changing the class but doesnt do much after changing the size once. It looks like it loses all the media queries.
document.getElementById("booking-md").className = "booking-sm";
Is using php with this an option? Im at a loss and seem to have tryied everything, thanks
#wayneuk2, please have a look at the below working snippet, have made a few minor updates to your own code, hope it helps :)
.set-height {
height: 175px;
}
.booking-md {
border: 4px solid #ccc;
}
#media screen and (max-width:991px) {
.booking-md {
height: 320px
}
}
#media screen and (max-width:767px) {
.booking-md {
height: 220px
}
}
#media screen and (max-width:560px) {
.booking-md {
height: 320px
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<div id="booking-md" class="container-fluid booking-md">
</div>
<br />
<button type="button" onclick="ret()" class="btn btn-primary btn-return">Return</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script>
function ret() {
$('#booking-md').addClass('set-height');
$('#return').show()
}
</script>
wow that was easy!! Dont know why I was trying the hard ways, I simply too out the change the height in the media queries and just set the 'booking-md' height like this to fit in the content.
.booking-md {height:auto;overflow: hidden;)
Works like a charm
How can you hide the horizontal line tag <hr> when the screen width is smaller than 767px?
How can this be done using css only.
You can use CSS to do that, it will take the device width in pixels and check if it's true.
#media (max-width:767px) { hr { visibility: none; } //This will make the hr hidden if the screen size is under 767px
Or you can just use JavaScript to check the width and see if you should deliver the hr to the page.
Kind regards
#media(max-width:767px) {
hr {
display:none;
}
}
<hr />
More info on media queries.
I know it's not tagged, but the Javascript would be as follows:
HTML:
<hr id="rule" />
JS:
if(window.innerWidth < 767){
document.getElementById("rule").style.visibility = 'hidden';
}
else{
document.getElementById("rule").style.visibility = 'visible';
}
use this:
#media screen and (max-width: 767px) {
hr{
display:none;
}
}
As inline css:
<style media="screen">
hr{
border-style: none;
}
</style>
As inside hr tag:
<hr style = "border-style: none">
On a mobile-first design, after changing values with Media Queries, Are we supposed to set them back to their original values on the parent stylesheet? or will it be handled by the browser?
<div id="mobile">
<div class="box1">
<div class="box2">
...
</div>
stylesheet:
( default style for mobile goes here )
#media (min-width: 500px) {
.box1 {
float: right;
}
.box2 {
float: left;
}
}
#media (min-width: 700px) {
.mobile {
display: none;
}
}
like in this case, should I to set the display value to, for example block on the default stylesheet? and/or reset the float attributes respectively?
No, setting default values won't be required in this case.
HTML has default display property with value inline, but say we want default value as block then we might want to specify default values.
I'm trying to make my wordpress blog responsive for mobile devices. I was able to customize homepage in style.css, but I'm having some problems with single post page.
The problem is: I have three columns and I want to remove right and left sidebars. But they are not id like on homepage, but classes.
Single post page has one id (#postcolumn) with 3 classes: .leftsidebar, .postzone and .rightsidebar. How do I remove .leftsidebar and .rightsidebar?
Here is my code for homepage, which is working great...
#media only screen and (max-width: 480px) {
#wrapper, #header, #column {
width:400px;
}
#middlecolumn, #rightcolumn, #header, #footer {
display:none
}
}
If I understand your question correctly, your HTML markup for your single post page looks something like the following:
<div id="postcolumn">
<div class="leftsidebar">
// something
</div>
<div class="postzone">
// something
</div>
<div class="rightsidebar">
// something
</div>
</div>
Applying the same logic as your home page, the CSS would look like:
#media only screen and (max-width: 480px) {
#wrapper, #header, #column {
width:400px;
}
#middlecolumn, #rightcolumn, #header, #footer, #postcolumn .leftsidebar, #postcolumn .rightsidebar {
display:none
}
}