I was designing a very simple page for a friend. I want to make it responsive-ish, and used a table. I can't get border-spacing to work tho...
You can see my work here: https://jsfiddle.net/Lt2wpehL/
Maybe this part overrides something?
#media screen and (max-width: 500px) {
.info td {
display: block;
float: left;
width: 50%;
}
.info tr,
.info td:nth-child(3) {
float: none;
width: 100%;
}
It's already been mentioned, but generally speaking, tables are pretty big faux pas these days. However, don't be afraid of using other methods! There are some very, very simple grid patterns available to you.
Consider using:
Bootstrap (http://getbootstrap.com/css/#grid)
Or the ever present 960 Grid System (http://960.gs/)
These systems are pre-written, and I think you'll find they server you better and save you a lot of time with future projects.
Related
I have customized the bootstrap table on responsive view with the help of media query and it showing well on all browser and all android phone. but when I checked the pages on iPhone then I saw all the table view is broken.
I have used the below code for table customization.
#media (max-width: 479px){
.opd_table table.manage_opd tr td, .opd_table table.manage_opd tr th {
float: left;
width: 100%!important;
text-align: left;
}
.opd_table table.manage_opd tr {
padding: 20px 0 13px;
display: inline-block;
position: relative;
}
}
http://i.imgur.com/j4h8A2y.png (This is the expected result)
http://i.imgur.com/Px21h93.jpg (And this is the broken UI result on iPhone devices)
You Should be able to achieve desired result with Bootstrap columns, have a look at:Bootstrap columns. If you are new to Bootstrap it is worth learning as it can make front end development so much easier.
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 have never run into this issue before, but for some reason, I cannot modify the width in my media query. In the developer tools, the width shows as being crossed out like I toggled it to not show, but that is not the case, it does it by default.
I am simple trying to change this:
div.wrapper{
display:block;
width:100%;
}
into this:
.wrapper {
width: 95%;
margin: 0 2.5%;
}
I have even tried changing my media query wrapper class to div.wrapper...but it did not help,
What would be causing this?
I think you should read this article:
CSS: Understanding the selector's priority / specificity
There's priority when you use CSS rules.
For example, .column .sponsors will have priority on just .sponsors
In css if we call an element like attribute.classname(div.wrapper) it will have more priority than calling .classname(.wrapper).
now you have two ways to solve this.
Change the calling method (use same way of calling in main-css and media-query).
Else give an adiitional property '!important' after width in .wrapper .
.wrapper {
width: 95% !important;
margin: 0 2.5%;
}
In your media query, use the same definition than previously:
div.wrapper {
width: 95%;
}
With regards to your .column .sponsors problem, you should do the same:
#media screen and (max-width: 640px)
{
.column .sponsors {
width: 90%;
}
}
This will not modify the .column declaration.
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)'
I have so many blocks with different sizing, padding and margin values. So I thought to create support CSS classes and combine as below;
CSS
.m-t-5 { margin-top: 5px; }
.m-t-10 { margin-top: 10px; }
.m-t-15 { margin-top: 15px; }
p-10 { padding: 10px; }
p-15 { padding: 15px; }
.f-left { float: left; }
.f-right { float: left; }
HTML
<div class="m-t-5 p-20 f-left lined"></div>
<div class="p-10 m-0 f-right"></div>
By using this all my class names are becoming big(I mean in length). So is this a good practice? please suggest me wether to continue this way or creating multiple CSS classes with its own properties.
Regards.
There are a few methodologies that suggest advice here:
Block, Element, Modifier
Scalable and Modular Architecture for CSS
Object-Oriented CSS
There's also the HTML/CSS style guide that Google's own developers adhere to.
I agree with #ryan, but you also need to be tricky and intelligently move around as-per your layout to reduce the code as maximum as you can. And also avoid using (-)&(_) etc... and make very simple & clean naming conventions. Please see example below:
CSS
.mt5 {margin-top: 5px;}
.pd5 {padding: 5px;}
/* Margin Top 5 and Padding 5 */
.mt5pd5 {margin-top: 5px; padding: 5px;}
.fl {float: left;}
.fr {float: right;}
HTML Markup
<div class="fl mt5 pd5">Welcome</div>
<div class="fl mt5pd5">Hello</div>
now used to this way
as like this
.marginT10{margin-top:10px;}
.marginT20{margin-top:20px;}
.marginT30{margin-top:30px;}
.marginT40{margin-top:40px;}
.pull-left{float:left;}
.pull-right{float:right;}
Two things:
This is perfectly fine and is very common. It actually helps to keep the DRY principle.
Second: The only 'best-practice' for coding css is to avoid inline css, but even that has exceptions. So if it works for you then go ahead and use it. (But again what your doing is considered ok practice.)