I just want to change font behaviour based on the website, how to add if - else condition in css.
My CSS :
td.email-heading h1 {
font-weight: 700;
font-size: 16px;
margin: 1em 0;
line-height: 20px;
text-transform: uppercase;
}
If website 1 font-weight: 700 should work, if website 2 should not work.
CSS does not have IF, else functionality built in. you can use JS jQuery as easy alternatives.
depending on what condition needs to be met (as it was not specified in the question) #media might be a solution for you in case the condition is screen dimensions.
more on #media here:
https://www.w3schools.com/Css/css3_mediaqueries_ex.asp
Related
So I made a small change on the page (gesher-jds.org/giving):
Donate Now, Pay Later
to
Donate Now, Pay Later
and now the design of the right calculator has changed (more like the button as I see). How do I fix it? Both of them looked the same (besides the text). I tried to add the code below to the CSS but it still didn't work. What I'm doing wrong?
CSS
a#payLater {
background: #60426c;
width: 100%;
display: inline-block;
margin-top: 20px;
padding: 10px;
text-align: center;
color: #fff !important;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
text-decoration: none !important;
}
If you apply the styling in the dev tools it works like expected. The reason it does not work in your working environment is probably because your styles are overwritten by different styles. Check the dev tools to see which styles are applied
Potential fixes:
1) Tidy up the "!important" rules.
2) Build stronger selectors -> keyword to look for knowledge [CSS Specificity]
If you set !important in one CSS rule, it'll become hard to overwrite that because !important = 1000 Specificity points so the rule is really strong
I have a webpage made by me. At this moment, on different screens, it is looking pretty different.
On my computer the "Sales" text is looking like this (which is I want):
FIRST IMAGE:
Whereas on another computer(with different screen size), its looking in this way(which is not I want):
SECOND IMAGE:
In this SECOND IMAGE, the sales text is going far left for some reasons (on different screen) which is not I want. I want it to be on the top of hands image as depicted in the FIRST IMAGE.
The CSS codes which I am using for the sales text are:
.sales .text1 {
padding-left: 450px;
color: #0275d8;
font-size: 1.3rem;
font-weight: bold;
font-style: italic;
padding-bottom: 20px;
}
I am wondering what changes I need to make in CSS so that its look same on different screen size computers.
You should use relative measurements like percentage,etc to avoid this, additional you can use media queries to have a different behavior depending of many factors like the screen width
Awesome question, you want to make your webpage responsive.
check out that link, I believe it has exactly what you are looking for.
https://www.w3schools.com/css/css_rwd_intro.asp
In your CSS, I have changed padding-left: 450px to 0 value and added text-align: right so that See More link will not be cut-off.
.sales .text1 {
padding-left: 0;
color: #0275d8;
font-size: 1.3rem;
font-weight: bold;
font-style: italic;
padding-bottom: 20px;
text-align: right;
}
My wordpress theme and the plugins I have installed conflict with one another forcing me to do my own CSS coding. After toying around with CSS and the inspect element tool on chrome, I fixed the responsiveness (not really fixed, more like hacked I guess..) of my website thevandreasproject.com. I used this code to make it work on the iPhone 5 screen:
#media (min-width: 680px) {
.home-background .textwidget {
font-size: 50px;
font-style: normal;
font-weight: 500;
letter-spacing: 8px;
font-family: 'Roboto';
min-height: 880px;
padding-top: 20px;
}
}
#media (max-width: 679px) {
.home-background .textwidget {
padding-top: 20px;
padding-bottom: 175px;
font-style: normal;
font-weight: 500;
font-family: 'Roboto';
}
.site-content {
height: 0!important;
}
#footer-banner {
padding:50px;
}
}
I was wondering if anyone could help me figure out how to rescale my images and text correctly for ALL devices instead of having to figure out media queries for every device there is. I appreciate it!
Start with the smallest screen size imaginable then expand the viewport until it looks like crap. Put a breakpoint in. Repeat process until you reach largest screen size you want to accommodate. I think Dave Rupert said that somewhere. Anyways short answer is don't use media queries based on popular devices but instead based on your content. There is no easy answer.
I'd like to be able to scale font size up across the board in slickgrid. It would appear that this is doable via style sheets etc, but not programmatically set a font size to use.
I've tried setting rowHeight in options, and then just apply a style in css to the rows themselves, but the text is always offset (because line height).
Is there any easy way of being able to just say use this font size and have the grid handle the rest? (I dont need variable row heights / font size, just be able to dynamically set it before rendering)
You can try the followings CSS changes, make sure to load that CSS file at the end so it doesn't get overwritten
.grid .grid-canvas .slick-cell {
padding: 5px 7.5834px;
font-size: 14px;
}
.grid .grid-canvas .slick-cell td {
font-size: 14px;
}
.grid .slick-header-columns .slick-header-column {
height: 33px;
line-height: 14px;
margin: 0;
border: 0;
/* like TH */
background: transparent;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold;
color: #333333;
}
.grid .slick-header-columns .slick-header-column.ui-state-default {
font-size: 14px;
line-height: 14px;
}
.grid .slick-header-columns .slick-header-column.ui-state-default td {
font-size: 14px;
}
If you want to change these settings dynamically after a page load, you might want to try putting all of these CSS in jQuery calls, though that might be ugly.. :S
If you want to change just 1 cell in particular, then you'll have to deal with SlickGrid metadata as shown in this answer here: Changing background color of a specific row in slickgrid?
I managed to get a working solution....
Basically I just created 3 css styles small medium large xlarge. I have row heights setup for those sizes as well.
When initializing the slick grid I set rowsize and then initialize the dataView like so:
dataView.getItemMetadata = function(idx) {
return {cssClasses: config.rowSize}
};
Basically applying the style of the same name to every row in the same slickgrid. Sucks I have to specify the actual rowheight in the actual initialization of slickgrid (vs just using something from css but what are you going to do.)
When using a <h1> tag for example, is there a reusable formula for getting the outer border of that element to PERFECTLY follow edges of the type? In theory I would expect this to work:
h1{
display: block;
font-family: sans-serif;
font-size: 38px;
line-height: 100%;
height: 38px;
}
So the line height is set to be the same as the absolute text height, which is also the height of the block. However this never works. Here is an example of what does work for sans-serif 38px;
h1{
display: block;
font-family: sans-serif;
font-size: 38px;
line-height: 28px;
height: 35px;
}
Here is another working example.
h1{
display: block;
font-family: sans-serif;
font-size: 25px;
line-height: 19px;
height: 22px;
}
This is all well and good, but it has to be calculated manually in firebug each time. There is no formula I can find to do this.
Additionally, it would be nice if any solution also worked with #font-face fonts, but I understand there is more to take into account there. (like the top alignment that only occurs on Mac).
Does such a formula exist? Is it possible to write one? How about some LESS CSS fancyness?
I agree with #ToddBFisher in the comment, and at this point for me it's more of an usability issue. Consider people can also vary the font sizes in their browsers... in that case using ems would be better. But browsers also render font differently, so something that looks amazing in a mac will look pixelated in a pc. If you want something to look perfect, use images.
Check this other question for more info on line-height: How to achieve proper CSS line-height consistency
Or this one: CSS Line-Height Guide
You can also check the usability stack for discussions about these things: https://ux.stackexchange.com/ There are pretty amazing posts in there.