So, Ive come across a problem that I can't seem to figure out the cause of.
I have a few CSS files:
1) styles.css - contains most of the webpage's styling.
2) overlay.css - contains the styling for my overlay.
3) media.css - contains all the media queries.
So far, everything works great and my page acts responsively. However, for some reason, I can't make media queries work with my overlay. Here is my CSS for the overlay in the file overlay.css:
#aboutus {
position: fixed;
background-color: white;
left: 50%;
top: 50%;
width: 800px;
height: 450px;
margin-left: -400px;
margin-top: -225px;
border-radius: 20px;
z-index: 9999;
}
Here is my media query in media.css:
#media screen and (max-width: 700px) {
#aboutus {
background-color: red;
}
}
At the moment this query has no effect whatsoever. The weird thing is, if I put the query under the code in overlay.css instead, it does work 100%.
Why is this so?
Thanks.
How do you load your css? Your media css should be on last after styles & overlay.css
Related
First of all, I do search and research and try this about a week and has no clue.. so I thought I have earned my right asking somewhat simple, haha!
For some reason, it looks like, width: 210mm; doesn't work as I want. Following screenshot rendered as print mode with F12 tool on chrome.
This is css..
#media screen {
body {
background-color: #eeeeee;
counter-reset: page-number;
}
}
#media print {
#page {
size: A4 portrait;
margin: 0mm;
}
html, body, .page-frame { max-width: 210mm; }
.page-frame {
margin: 0;
}
}
.page-frame
{
overflow: hidden;
position: relative;
page-break-after: always;
background-color: white;
width: 210mm;
height: 297mm;
padding: 30mm 20mm 20mm 20mm;
border: 1px solid #dddddd;
column-count: 2;
column-gap: 5mm;
column-rule-width: 2px;
column-rule-color: var(--secondary);
column-rule-style: solid;
counter-increment: page-number;
margin-top: 1em;
}
/* page layouts */
.page-header { position: relative; column-span: all; margin-top: -17mm; margin-bottom: 2mm; height: 15mm; border-bottom: 2px solid var(--secondary); }
.page-footer { position: relative; column-span: all; height: 10mm; padding-top: 2mm; border-top: 2px solid var(--secondary); text-align: center; margin-top: 2mm; }
.page-header > div, .page-footer > div { position: absolute; width: 100%; height: 100%; }
.page-footer .page-number:before { content: counter(page-number); }
.column-frame { height: 100%; width: 100%; }
In other attempts, including uploaded image, the grey area (body element) remains and surround expecting-paper area and I cannot get rid of this surrounding grey area.
Also, .paper-frame div itself looks smaller than actual a4 size.. and I cannot understand whats happening at this point.
All I want is the .page-frame element properly rendered as A4 size on both screen and print.. and it's hard!
I'm using bootstrap 4 on laravel 7.x and latest version of Chrome browser..
Edit 1 --- Chrome Issue #273306 https://bugs.chromium.org/p/chromium/issues/detail?id=273306
Could it be that problem is the same issue in above link? .. maybe?? or not?.. still I cannot solve this. In my previous work, I used https://cdnjs.cloudflare.com/ajax/libs/paper-css/0.3.0/paper.css for A4 rendering and it works, but I cannot find whats crucially different so cause the problem.
I've worked with chromes print function in the past and the best way i found to fix these kinds of rendering problems was to brute force it.
Basically change the .page-frame size until it fits.
Although I have to say that your problem seems weird to me since if I remember correctly then the pixel sizes of your .page-frame are inline with what I used.
From the information I can gather from the picture, chrome might be including the margins of .page-frame in to the render. So zero them out forcefully in css.
You could also try to set the "scale" in print options higher to see if that fixes the problem.
For the start, I'd like to introduce might be a rookie problem that there is !important value inside bootstrap.print module.
When you print out, browser using #media print script, yes?
Since I use laravel, hence using webpack, so I generate app.css file that include bootstrap.
During that phase, there are two variables named $print-page-size and $print-body-min-width at the end of node_modules\bootstrap\scss\_variables.css
/* ..(inside node_modules >> bootstrap folder)/_variables.css */
..
// Printing
$print-page-size: a3 !default;
$print-body-min-width: map-get($grid-breakpoints, "lg") !default;
This cause the problem. It's not a bug or any. Well, if you compare the size of actual a4 paper and rendered paper on screen, there might be some difference between those two but it's not a problem. Size is different but result is resemblance.
When you look inside of resource\sass\app.scss file, bootstrap imported after custom scss files like custom or variables.
You can specifiy $print-page-size and $print-body-min-width parameter before importing default bootstrap _print module. When you do that, specified parameter overwrite those value so problem solved. I just set those two value like below.
/* resources/sass/_variables.scss file */
// print
$print-page-size: a4;
$print-body-min-width: auto;
..hey. I sovled!
I am inserting simple html pages made with bootstrap 4 into a wordpress project.
I'm using the container class to the divs that contain the contents.
The pages work very well, if it were not for a vertical line that appears to me along the whole page, made up as follows:
On another page:
I tried on the usual page to put a piece of css doing so:
* {
border: none;
}
or
.container {
border: none;
}
But I see that nothing has changed, so I can't imagine what it is.
Here are the page links:
page 1
page 2
It is being added by custom style from Divi here:
#media (min-width: 981px){
#main-content .container:before {
position: absolute;
top: 0;
width: 1px;
height: 100%;
background-color: #e2e2e2;
content: "";
}
}
I'm trying to create an HTML scheduling app that sizes the created tables to fit the the screen while maintaining its same size ratio. It looks fine when I have it fullscreen: . But when I resize the window or someone with a different screen resolution runs it, the positioning of the tables messes up like so: .
I was wondering if there was something I could do in my CSS or JavaScript files that would ensure that the ratio and relative positioning of each table remained the same no matter what screen size or resolution it is ran on. I'll include a JSFiddle for further understanding here:
CSS for Tables and Positioning:
/* To control the style of the overall table class */
table {
border: 0.0625em solid black;
text-align: center;
table-layout: fixed;
}
th, td {
border: 0.0625em solid black;
width: 8.75em;
height: 2.1875em;
}
/* Settings for Days row */
.tableDays {
width: 8.75em;
}
/* Settings for Employee column */
.tableEmployees {
line-height: 2.1875em;
}
/* Settings for Tasks table */
.tableTasks {
width:100%;
margin-top:0.3125em;
empty-cells: show;
height:62.5em;
line-height: 2.1875em;
width: 6.25em;
}
.empTaskCont {
height: 31.25em;
width: 100%;
overflow-x: hidden;
overflow-y: scroll;
position: relative;
padding-bottom: 1.875em;
}
#table-wrapper-days {
position: relative;
width: 66.5em;
margin-left: 15.8125em;
/*float:right;*/
}
#table-scroll-days {
height: auto;
overflow-x: hidden;
}
#table-wrapper-employees {
position: relative;
float:left;
width:18%;
margin-top:0.5em;
}
#table-scroll-employees {
width: auto;
overflow-y: hidden;
max-height: 31.25em;
}
#table-wrapper-tasks {
position: relative;
width:81%;
float:right;
}
#table-scroll-tasks {
overflow-x: scroll;
overflow-y: scroll;
max-height: 32.625em;
}
.employee-mod-btn{
float:left;
}
JSFiddle: https://jsfiddle.net/hs5sz8kb/#&togetherjs=x3LUnVhmMp
I'm still very new to HTML, CSS, and JavaScript so any additional advice on my code is greatly appreciated. Thank you for your time!
Reviewing the content of your fiddle, the issue is less related to CSS, and more related to your HTML layout. The first problem is that you are building multiple tables when they should just be 1 table. Your top "row" should be part of the table with all the content, instead of a separate table. Your left column is also a separate table. Combine them all into 1 table and that will help a lot.
I hate to redirect your efforts toward a total rewrite because you are learning HTML and CSS, but you may find that a very effective way to implement "responsive" design is with a helper library. I would suggest considering the use of Bootstrap, although there are many others. Bootstrap adds a lot of "helper classes" that will take some of the effort of achieving what you are trying to achieve out of the equation. Consider tables for example, what I think you might be looking for is "breakpoint specific" tables.
https://getbootstrap.com/docs/4.0/content/tables/#breakpoint-specific
Another option is to have always responsive tables, where as the screen resizes you will get a horizontal scrolling frame.
There are a lot of options to choose from, so try it out. You can easily add the Bootstrap library to your JS Fiddle in the "resources" section.
Additionally, you might consider storing your data as JSON or in a database. As you progress with this project, you may find Datatables to be a very useful javascript library. It allows you to work with the raw data and build the tables more dynamically.
https://datatables.net/
Instead of using custom css to style your tables which could take some time for it to be looking good at all screen widths, consider using bootstrap which is a responsive framework for html, css etc. It will be worth while you reading about bootstrap as they provide responsive tables that will help you based on the screen size of the monitor or other device. Check out this link that will help you with building the html structure and adding bootstrap to your workflow. All you will have to do is modify the table to suit your needs.
References:
https://getbootstrap.com/
https://getbootstrap.com/docs/4.0/content/tables/
I started a blog. I'm new to coding and I want to transform my Search menu into a full overlay search menu. But for mobile devices, I only want something like this:
And I don't really know, should I make a brand new search menu only for mobiles, or edit that one with resizing and other stuff?
I'm working on WordPress, and I know that there are plugins for this work, but I want to learn how to do it by myself. Not only that, but coding as all. And yea, I know it's bad, but it's my first one! :) So any suggestions would be really appreciated.
My blog link:www.shreddingnation.com
I really don't know which code to paste, and if there is even any need to paste code, so if you want me to paste anything, just say what. THANKS!
One way to do that is to use Css Media Queries. So in this case at a width <= 600px there will be a full search overlay.
1) Add the following css to wp-content/themes/yuuta/style.css
#media all and (max-width: 600px) {
.site-header .search-form.search-form--active {
position: absolute;
top: 80px;
left: 0;
width: 100%;
background-color: #fff;
height: calc(100vh - 80px);
}
.site-header .search-form input.search-field {
border: 1px solid #000;
color: #000;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
2) Add the following js to /wp-content/themes/yuuta/assets/js/theme.js
after /* hide search field */ add
$('body').css('overflow','auto');
and after /* show search field */ add
$('body').css('overflow','hidden');
Hope this helps...
Hi I'm still new to web development. So I have a register page that floats as a div above the main page but I was wondering how do I ensure that the div gets centered in a responsive manner?
The pages are separated and included at the header.
<?php
include ('includes/login.php');
include ('includes/register.php');
?>
my register's css
#regScreen {
padding: 5 5 40px 5px;
margin: 0 auto;
position: fixed;
top: 5%;
left: 33%;
z-index: 10;
display: none;
background: #ebebeb;
}
#regScreen:target, #regScreen:target+#cover {
display: block;
opacity: 2;
}
#reghead {
background-color: #e2e1e1;
text-align: center;
display: block;
padding: 0px 0px 10px 0px;
}
I tried to use media query on my #regscreen:
#media (max-width: 300px) {
#regScreen {width: 100%;
left:0%;
}
}
But using media queries doesn't seems to recognize the page as responsive as it is already small. From my understanding, please correct me if I'm wrong.
It's difficult to provide an exact answer without more infomation (it would be great if you added more of the HTML markup), however...
If the issue is that the floating div does not resize to fit various screen sizes (and since you're new to web development...welcome aboard!), there are a couple of suggestions I can make:
1) You may be overcomplicating it by trying to apply the #media (max-width:300px) media query. By simply adding the following styles, the registration form should resize accurately:
#regScreen {
/* The rest of your styles go here */
width:90%;
max-width:600px; /* em or rem value would be better than px... e.g. 37.5 em */
}
This would ensure that the width of the form is always either 90% of the screen width OR 600px, whichever is smaller.
2) If you think there may be an issue with the media query not trigerring, an easy way to test it is to make something really obvious happen at that breakpoint...for example:
#media (max-width: 300px) {
/* Test Style */
/* Turn background red when below 300px */
body{
background-color:red !important;
}
/* Your original styles */
#regScreen {
width: 100%;
left:0%;
}
}
By doing this, it should allow you to start troubleshooting whether it's your media query syntax or something else that is the issue; maybe the media query styles are being correctly applied (so your media query syntax is ok) but the new styles are being overwritten later in the CSS (or due to the specificity of certain rules).
If you add more info to your question, let me know and I'll take another look but until then, this should hopefully help get you on the right track.
I'm not sure about what is the element using those selectors, but I tried to make a sample html & css reference for solving your issue. Here is the link jsfiddle.net/3Le34w8p/
i already see one error just by looking
#media and (max-width: 300px) {
#regScreen {
width: 100%;
left:0%;
}
}
you for got 'and' before '(max-width: 300px)'