I am using two separate CSS files with media queries to achieve different styles based on the screen size of the viewer. I have the following lines in my desktop css file:
Desktop CSS:
.labelContainer .labelText.labelText_xl {
width: 155px;
}
.labelContainer .labelText.labelText_big {
width: 135px;
}
.labelContainer .labelText.labelText_med {
width: 105px;
}
What I am trying to achieve, that when the Mobile css version kicks in, indifferent of the labelText_size class the labelText should take up all the width it can. If I copy the above three rules, and change the width to 100% in each of them, this works just as intended. But if I try to do the following
.labelContainer .labelText {
width: 100%;
height: 32px;
}
only the height gets changed, and the width stays the same.
I presume this is because the more exact the rule, the higher priority it has, but isn't there a way to tell CSS, that no matter what other classes the DOM element has, apply the desired rule?
Because if I define like 20 different size styles for my labels, I would now have to define the same 20 different size styles in my mobile css too, instead of using a single rule, that overwrites the rest.
EDIT: I know I can achieve the desired result with marking the rule as important, but I would rather not do that, because I don't think that setting something as important is a good practice in css.
You can achieve this by using attribute selectors:
.labelContainer .labelText[class*="labelText_"] {
width: 100%;
height: 32px;
}
You could add any class only for mobile devices on <html> or <body> and use it in your mobile CSS version. For example:
.mobile .labelContainer .labelText {
width: 100%;
height: 32px;
}
Related
So I am using the Evil Icons in my Front End web development.
Although they have their preset size, I would want to use custom.
However, after reading the site documentation on styling I still do not understand how to change it :(
Can anyone help me with that?
I observed their css for m, l, s classes. and this is what i found.
.icon--l {
width: 100px;
height: 100px;
}
As per my understanding you can create your custom class and apply it to icon. see below code
.icon--custom-size {
width: 200px;
height: 200px;
}
Just change the height width and create new custom class.
Create a custom size
.icon--sm {
width: 30px;
height: 30px;
}
Use the custom size by setting the data size property in your custom size.
<span class='c-social-nav__icon__content' data-icon='ei-sc-github' data-size='sm'></span>
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/
While I was writing a css for a website, I found that some portions of my css did not work as intended. What happened was that within a selector with the highest specificity, when I tried to adjust the width or margins of an element, it did not change. However, within the same selector, other properties could be adjusted without problem.
e.g.:- take this selector
.get-touch {
text-decoration: none;
margin: auto;
margin-top: 35px;
color: #fff;
width: 200px;
}
This is applied to a button, and I wanted to increase its width.
Even if I change the width to 500px, the width will not change whatsoever. However. any modifications to other properties will be reflected on the browser.
Here, I have attached the file to my particular css file which brings the problem:- https://drive.google.com/open?id=0B1CjX_FVqdRjWGRkS3NLOG9tTEE
How can this occur, and what can I do to prevent such problems?
.get-touch {
display: inline-block; /* Add this */
text-decoration: none;
margin: auto;
margin-top: 35px;
color: #fff;
width: 200px;
}
As you have mentioned that the button size is not changing even after giving it width, it means you are applying your CSS on an inline element and thus the browser can't render its box-model.
Adding a display:inline-block property will make it work.
I have this css from bootstrap.min:
.rew {
margin-right: auto;
margin-left: auto;
margin-top: 20px;
width: 1050px;
}
.rew2 {
margin-right: auto;
margin-left: auto;
margin-top: 20px;
width: auto;
}
And my div like this (I've red examples from question and answer in stackoverflow):
<div class="rew rew2">
content.....
</div>
The (rew2) it's for responsived css, but before that I was wrote the css on my responsive css file, but it's not working the "div tag" always calls css from bootstrap.min css file. So I wrote two classes in the bootstrap.min css file, but not working also. The "div" tag only called the "rew" class and the "rew2" was ignored.
******** The class on responsive css file was deleted and I wrote the class on bootstrapmin css file
The differences it's only on width, if the site opened from desktop it would have 1050px width, and for the responsive (opened from smartphone) it will automatically adjust the template with the smartphone screen as "auto".
*Huft...I'm so confused why it's not working. I need help from you guys.
Thank you,
Best regards,
Kris
Why would you customize bootstraps .css file on your own? Just create your own rules and attach them to your div.
CSS stylings are always used one by one. So if you, for example, include your bootstrap.min.css file before your own styling rules, your own ones would overwrite all bootstrap stylings.
In other words:
First of all include bootstrap.min.css, then your own .css file.
Let's assume you've got this markup
<div class="foo bar"> </div>
You could style it through the 2 classes foo and bar.
.foo {
color: red;
}
.bar {
color: blue;
}
Using this would end up in the blue color, according to the declared order.
Let's even try to be a bit more specific.
You can also overwrite rules by using some more complex selectors.
.foo.bar {
color: black;
}
The above code would overwrite both of the previously defined rules, because they are 'stronger' selectors than a simple single-class selector.
Conclusion
If you want to overwrite bootstraps styling, try to stick to the order. If bootstrap uses some complex selectors and your custom ones won't trigger, try to use a bit more complex ones. Look here to learn more about complex selectors.
A little hint at the end:
Try to avoid !important! A rule, declared as !important, will overwrite all other rules, regardless of whatever you have declared up before.
Don't customize bootstrap.min.css create your own css file, In that you can write your own css as you need.As per you requirement include media query for smartphone in that give width: 100%; for that element.
Forgive me if I've worded the question wrongly. I'll try to explain my question briefly and accurately. First of all I am using an online website builder for my website called PortfolioBox.
What I am trying to do is clip an image within a container without the image automatically re-sizing itself to fit to the width of the container. The code I used is simple:
HTML:
<div id="imageContainer">
<img src="http://www.kirupa.com/html5/images/circle_colorful.png">
</div>
CSS:
#imageContainer {
background-color: #333;
width: 350px;
height: 200px;
border-radius: 5px;
overflow: hidden;
}
The following code should result in something that looks like this:
http://www.kirupa.com/html5/examples/clipping_content.htm
However, if you check the result of the same code on my website you will see that the image being clipped is shrinking to fit the width of the container:
http://roryhammoud.com/test-new
Because I am using a webhost/builder, the pages come prebuilt with CSS code. There must be something in the preloaded CSS that is causing this. I however don't have access to that CSS code.
The Question
So my question is, is there anything that I can do to override this issue?? I do have the ability to add CSS code to pages, so I am hoping I can override it somehow. I would greatly appreciate any help..
Here is the page on JSFIDDLE http://jsfiddle.net/0e5nda2b/ (Please note I cannot remove CSS code, I can only ADD)
Thank you in advance.
You have a CSS rule in your file that sets the max-width to 100%. Remove it.
.textContent object, .textContent embed, .textContent video, .textContent img, .textContent table {
max-width: 100%;
width: auto;
}
If you can't simply remove that rule, create your own that sets the max-width to initial and make your rule more specific, or use !important (not recommended). For example, #imageContainer img {max-width:initial;}
Because you are not able to modify the existing CSS, you must override it.
You need to be more specific with your selectors to target the element in question like so:
#imageContainer img {
max-width: inherit;
}