Remove horizontal line <hr> when screen width <767 - css

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">

Related

Media query in style.css doesn't affect all header parts. How can I target all headers?

This is my code:
#media screen and (max-width: 480px) {
header {
background-color: blue;
}
}
On mobile, my main header (Header Dark Small > Group > Row) stays the default background color while a different header (Header Dark Small > Spacer) does change blue.
html:
<div class="wp-site-blocks">
<header class="wp-block-template-part">
<div class="wp-container-8 wp-elements-7 wp-block-group alignfull has-foreground-color has-background-background-color has-text-color has-background has-link-color" style="padding-top:0px;padding-bottom:0px">
<div class="wp-container-6 wp-block-group alignfull" style="padding-top:10px;padding-right:0px;padding-bottom:10px;padding-left:0px">...</div>
<header class="alignwide wp-block-template-part"></header>
</div>
<div class="wp-block-spacer" style="height:66px" aria-hidden="true" class="wp-block-spacer"></div>
</header>
Changing the code on chrome, I found something I don't understand:
.wp-site-blocks > * {
background-color: blue;
}
That doesn't affect main header. But when I move up and change:
.wp-site-blocks, body > .is-root-container, .edit-post-visual-editor__post-title-wrapper, .wp-block-group.alignfull, .wp-block-group.has-background, .wp-block-cover.alignfull, .is-root-container .wp-block[data-align="full"] > .wp-block-group, .is-root-container .wp-block[data-align="full"] > .wp-block-cover {
padding-left: var(--wp--custom--spacing--outer);
padding-right: var(--wp--custom--spacing--outer);
background-color: red;
}
That does change the main header's background color.
Without knowing what you html looks like i can only hazard a guess. But it looks like maybe you are using a third party to style things such as bootstrap. Have you tried
#media screen and (max-width: 480px) {
header {
background-color: blue !important;
}
}
or specifying a more strict selector such as
#media screen and (max-width: 480px) {
div.wp-site-blocks header.wp-block-template-part {
background-color: blue !important;
}
}
Try styling by specifying the classes you have in each header.
e.g.
header .wp-block-template-part {}
If it doesn't work try to use !important in your CSS properties because as I see they are wordpress classes
I used Google Chrome's inspect element to find, copy, and paste the relevant style.css code, and that solved my issue.

How to increase specificity weight

<td class>
<div class="browser indicator">
<div class="mobile indicator">
In this code, the class indicator has a display:inline-block. How do I increase the specificity weight of the class browser and mobile so I can give them a separate value for display?
You can do that by specifying both classes "chained", meaning browser when it has indicator as well use this style.
.browser.indicator {
}
.mobile.indicator {
}
The important part for you is to not have the space between the classes because doing this will style children with the class indicator
.browser .indicator {
}
.mobile .indicator {
}
U can use this one:
.indicator {
display:inline-block;
width: 100%;
}
#media only screen and (max-width: 600px) {
.indicator {
display: block;
}
}
if screen size will be less 600px all styles which u have at #media will provide for page.

use different css when button clicked with different media queries

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 to make print use desktop media queries?

I am attempting to add some print functionality to my page, but I am having an issue where when I print, it is printing as if it is mobile. How can I make it so that when someone hits print it prints the desktop version?
$('.print-btn').click(function(e) {
window.print();
});
.visible-desktop {
display:none;
}
#media only screen and (min-width:768px) {
.visible-desktop {
display:block;
}
.visible-mobile {
display:none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="visible-desktop">Viewing from desktop</div>
<div class="visible-mobile">Viewing from mobile</div>
</div>
<a class="print-btn" href="#">Pring</a>
You can add an #media print rule at the bottom of your stylesheet:
#media print {
.visible-desktop {
display:block;
}
.visible-mobile {
display:none;
}
}
only screen
This excludes print. If you want to include print, don't write that.
You should pick one state (probably desktop) and make it the "default", by moving that state outside media queries.
The other states should override the default state's properties in media queries.

Media print issue in in portrait mode

I have this form, which i print in order to do my work.
Now, the issue is, in the portrait mode, it gets minimized, i mean it looks small, like half of the page of an A4 Letter, while in landscape mode it looks just fine.
Here is my media print css:
#media print {
textarea{
border:none;
}
textarea#difekti {
padding-bottom:40px;
border:none;
}
#menu-home { display:none }
#status-print { display:none }
#submit-f {display:none};
#MainContent {
display: block;
}
#tab1 table, td, th {
border: 1px solid red;
}
#tab1 thead {
float: left;
}
#tab1 thead th {
display: block;
background: yellow;
}
#tab1 tbody {
float: right;
}
#programi {
display:none;
}
#kursor {
display:none;
}
#adresa { }
* {position:static !important;}
}
Any suggestion?
Besides, i have issues with IE too.
Can i create an additional media print for IE?
Thanks
You should change this to a separate CSS file and link it to your HTML document using media="print" at the bottom most of any CSS link.
<link rel="stylesheet" type="text/css" media="print" href="path/to/your/css" />
This will also help you avoid the issue with IE.
The #page CSS at-rule is used to modify some CSS properties when printing a document. You can't change all CSS properties with #page. You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.
#page { size:5.5in 10in; margin: 1cm }
#media print and (orientation: portrait) { styles here }
#media print and (orientation: landscape) { styles here }

Resources