I've recently been making a website and for some reason working on media queries for it to fit mobile view. It has lots of extra white space which is confusing to me.
My problem : Extra white space in mobile view, that im positive is caused by the "MainMenu" dropdown from a "Burger" that I'm using. It seems like MainMenu has a min-width instead of width 100% but I don't know why. Also on Mobile View you can scroll really far out of the webpage and get all this extra white space.
Here is some code of the MainMenu :
CSS -
/* Nav Main Menu */
nav .mainMenu {
display:flex;
list-style: none;
}
nav .mainMenu li a {
display: inline-block;
padding: 30px;
margin:10px;
text-decoration: none;
color: rgb(0, 0, 0);
font-size: 1.5rem;
font-family:'Courier New', Courier, monospace;
}
nav .mainMenu li a:hover {
color: rgb(0, 110, 255);
}
JS Burger Script -
function show(){
mainMenu.style.display = 'flex';
mainMenu.style.top = '0';
}
function close(){
mainMenu.style.top = '-100%';
}
Here is some reference images of my problem :
My Question : How can I remove extra white space on my page, and set the burger menu to width of 100%.
Heres my github/website to check it out fully : https://github.com/ConstantineLinardakis/TwinPlayzOfficial
https://constantinelinardakis.github.io/TwinPlayzOfficial/index.html
The error you are facing isn't because of the Menu. I debugged your website using the dev tools and I found out that
<p> © TwinPlayz 2021</p>
This is the line that is consumingunnecessary space. Add an id to that paragraph like this,
<p id="copyright_text"> © TwinPlayz 2021</p>
And then add the following CSS with the media query
#media (max-width: 600px) {
#copyright_text {
width: 130px; //adjust to your own needs
}
}
Not sure if anyone has come across this. I'm using PrismJS syntax highlighter to highlight code. Application is written in Reactjs and what I'm trying to do is inside a WYSIWYG editor I'm wrapping user selected text with pre + code when user wants to insert code block. PrismJS seems to tokenize elements correctly as you would expect:
But as you can probably see from the image above, everything is put into a single line. Rather then nice code block:
I'm not sure what's wrong, using css from prismjs site:
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
#media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #dd4a68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
Here is outputted html:
EDIT:
If adding word-wrap: pre-wrap this is the outcome:
I had a similar issue when initializing the element manually. I stumbled upon this discussion, which had a fix that worked for me: https://github.com/PrismJS/prism/issues/1764
HTML - Load script with flag data-manual:
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.20.0/prism.min.js" data-manual></script>
JS - Add the following hook:
Prism.hooks.add("before-highlight", function (env) {
env.code = env.element.innerText;
});
Prism.highlightElement(code);
Working example:
https://codepen.io/Ukmasmu/pen/xxZLwxG?editors=1010
Try to update the CSS file with:
white-space: pre-wrap
https://github.com/PrismJS/prism/issues/1237
In case this is helpful for anyone else, I have a textarea that updates a code block as you type, and this worked for me:
<textarea onkeyup="this.onchange();" onchange="document.getElementById('query-highlighted').textContent = this.value; Prism.highlightAll();"></textarea>
<pre><code class="language-sql" id="query-highlighted"></code></pre>
Namely, I used .textContent = instead of .innerText = (the latter didn't preserve the line breaks as expected).
I was aided by Sever van Snugg's answer and the issue he linked.
1. Activate normalize whitespace plugin
I suggest you activate normalize whitespace plugin and set the break-lines property instead of manipulating prism.css file to using white-space: pre-wrap like this:
Prism.plugins.NormalizeWhitespace.setDefaults({
'remove-trailing': true,
'remove-indent': true,
'left-trim': true,
'right-trim': true,
'break-lines': 60, //max number of characters in each line before break
});
I'm using the above approach in my blog, and it works like a charm. You can adjust the break-lines value according to your preferences of course.
2. Insert a line break tag <br> to break a line at will
Now that you set the break-line property after a certain maximum number of characters, you probably want to break some lines at will for cleaner code. To do so you need to insert a <br> tag where you want to have a break line.
NOTE: if you're using an html parser to parse dynamic content with prism
If you're using a parser to parse you dynamically generated html code as a string (from a database for example) and prims is not parsing your <br> tags you'll have to use before-sanity-check prism hook like this:
Prism.hooks.add('before-sanity-check', function (env) {
env.element.innerHTML = env.element.innerHTML.replace(/<br>/g, '\n');
env.code = env.element.textContent;
});
before highlighting, what the above code does is replacing <br> tags with \n since prism can't parse <br> as a line break.
Similar to the answer by Sever van Snugg, I use the following solution where the forEach loop highlights all the code nodes according to the style rules of the Prism CSS stylesheet used (because I have several code tags on a single page). I locate these scripts in the bottom of my HTML body:
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.27.0/prism.min.js" data-manual></script>
<script>
Prism.hooks.add("before-highlight", function (env) {
env.code = env.element.innerText;
});
code = document.getElementsByTagName('code');
Array.from(code).forEach(el => { Prism.highlightElement(el) });
</script>
I tried to mixed Markdown and Prismjs the trick is to replace '\n' with '\r\n' to keep breaklines.
from bs4 import BeautifulSoup
...
code_tag = soup.new_tag('code class="lang-%s"' % lang)
code_tag.string = code.string.replace('\n','\r\n')
code.replaceWith(code_tag)
I'm trying to figure why the #media print doesn't seem to work on the iOS, on android the functionality works fine. Basically I've made a functionality to hide the contents that aren't part of the print
body.printing *{display : none}
and only display the contents that will be printed
body.printing .print-me, body.printing .print-me > div{display : block}.
$('.print-modal').on('click', function() {
$('body').addClass('printing');
window.print();
$("body").removeClass("printing");
})
#media print {
/* Hide everything in the body when printing... */
body.printing * { display: none; }
/* ...except our special div. */
body.printing .print-me, body.printing .print-me > div { display: block; }
}
#media screen {
/* Hide the special layer from the screen. */
.print-me { display: none; }
}
Maybe the issue is, you are adding a class printing and removing the same class immediately. That's could be the reason.
Try changing the logic. You don't need to add a class for printing. Instead use print media query #media print to handle print logic.
$('.print-modal').on('click', function() {
window.print();
})
#media print {
/* Hide everything in the body when printing... */
body * { display: none; }
/* ...except our special div. */
body .print-me, body .print-me > div { display: block; }
}
#media screen {
/* Hide the special layer from the screen. */
.print-me { display: none; }
}
I am trying to add some styling to my print page(unfortunately i am a beginner so far so bear with me if i am doing something dumb). Here is the style sheet
#font-face {
font-family: 'Cloister';
src: url('../fonts/fonts/CloisterBlack.ttf');
font-weight: normal;
font-style: normal;
}
.navbar {
display: none;
}
.main-navigation{
display: none;
}
.hidden-print {
display: none;
}
.breadcrumb {
display: none;
}
.page-header {
display: none;
}
.footer {
display: none;
}
.main-container {
/*margin: 0 ;
padding: 0 !important;*/
}
.main-content .container{
min-height: auto;
border: none;
background: #0000ff;
}
#page {
margin: 1cm;
}
h1.page-title {
font-family: 'Cloister';
font-size: 40pt!important;
text-align: center ;
}
and this is my print method.
$('#printButton').click( function () {
var divContents = $("#printPage").html();
//console.log(divContents);
var printWindow = window.open();
printWindow.document.write('<html>' +
'<head>' +
'<link rel="stylesheet" href="<?= base_url() ?>assets/css/print.css" type="text/css" media="print"/>'+
'<title>Student Report Card</title>');
printWindow.document.title = '';
printWindow.document.write('<h1 class="page-title"> BeaconHouse Potohar Campus</h1>');
printWindow.document.write('</head><body >');
printWindow.document.write(divContents);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.print();
});
Everything is seems to be working fine until i inspect my print page, there i can also see my style sheet getting added but when i go to the h1 tag, my style sheet doesn't appear and instead there is user agent stylesheet(added by browser as last resort when no style is present on stackoverflow).
Finally i am adding this image just to consolidate what i am trying to convey.
Two Three issues jump out:
In your style, you have font-family: 'Cloister'. Those quotes shouldn't be there, it should just be font-family: Cloister.
You're outputting your h1 within your head element. (The browser is then relocating it for you.) It should be after the start of body. I think you just have two of your document.write lines reversed.
As Darren Sweeney pointed out in a comment, you've identified the style sheet as being for print only (media="print"). When using dev tools, if you cancelled the print and inspected the window you opened without telling Chrome to show you the "print" media state, you're not going to see that style because it doesn't apply.
Here's how to tell Chrome to show you the "print" media state:
Open devtools (right-click the h1 and choose Inspect, for instance)
From the devtools menu box on the upper right-hand side...
...choose More Tools > Rendering Settings:
Tick the "Emulate media" checkbox and choose Print from the list:
I am printing a page using a dot matrix printer by using javascript print() method and by use of #media print methods in css.
My print.css as follows:
#media print {
html, body {
font-family: 'Arial', 'Helvetica',sans-serif;
font-size: 15pt;
margin : 0px;
}
}
#page {
size: 22cm 10cm;
margin : 0px;
}
My printable detail is very small suppose two lines of data. But after printing
the printer skips the current printed page and feeding another page.
I want to avoid feeding next page and the next print should happen from the same page which is printed last.
I have tried:
#media print {
page-break-after: avoid;
}
But not working at all.
How can I do this?
Try the * selector css:
#media print {
* {
page-break-before: avoid;
page-break-after: avoid;
page-break-inside: avoid;
}
}
Try defining a page size something like
#page {
size: 21.59cm 13.97cm;
}
should work