My web site http://maximearchambault.com
I will like to have the same color background size for my 3 section, commercial, personal project and info / contact. The blue need to be 180 pixels.
/* section title */
#index span.section_title,
#index span.section_title a { color: #000000; font-weight: bold; background: #00FFFF; }
This is located in my style.css.
Color has no size. If you want to enforce certain measures, use width (or height) respectively, i.e. width: 180px;
on line 75 of your style css -
#index span.section_title, #index span.section_title a {
color: black;
font-weight: bold;
background: cyan;
width: 180px; //add this
display: block; ///add this
}
you may want to add it to the span only, in which case add a new rule -
#index span.section_title {
width: 180px; //add this
display: block; ///add this
}
Just try this
#index ul.section {
font-size: 10px;
margin-bottom: 1em;
border: 1px solid #636363;
background: cyan;
width: 180px;
}
Related
I personalize a part of my Prestashop site and i don't know what I can use for center this element :
Image
Css :
.active, .accordion:hover {
background-color: #ccc;
}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
margin: 25px 25px 25px 25px;
display: none;
background-color: white;
overflow: hidden;
}
If you wanna center the words inside the container exist the property css text-align
You must have include the html too if you want a better answer and what have you tried.
As an example, these elements were centered using css, text-align:center;
I would like to make my arrow tinnier. I was not able to change the font-weigth so not sure what to do. This is my code.
button {
height: 50px;
width: 50px;
font-size: 40px;
border: none;
background-color: transparent;
outline: none;
color: #000;
}
<button class="left-button" onclick="plusDivs(-1)">❮</button>
You should use font-awesome icon.
.slideshow .buttons button{
height: 50px;
width: 50px;
font-size: 40px;
font-weight:normal;
border: none;
background-color: transparent;
outline: none;
color: white;
}
If you want to keep the icon that you have and not use a font awesome icon like the above then do this:
.left-button {
font-size: 20px; (adjust as needed)
transform: scale(.5, 1); (adjust as needed)
}
Link about transform scale property: https://www.bitdegree.org/learn/css-transform
Demo:
Before: https://jsfiddle.net/ne7mpufj/1/
After: https://jsfiddle.net/ekhm14r0/2/
You'll have to adjust the values in the font-size and transform scale property as needed but that should help get it working for you.
I am adding a section/block to my website. The font overlay does not look good with all background pictures. Sometimes it is hard to read the text. A slight blur will fix my issue. However, with my current code and all the variations I have tried, it applies to blur way above the text size. If I apply blur to just the text areas it does not make a perfect "square" and leaves the empty areas the original background color. Sort of a highlighter effect.
How do I make it so that it blurs only the box of text as a whole? I have been trying to get something that looks like what this guy has done: https://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/
My CSS code is:
* {
box-sizing: border-box;
}
beody {
margin: 0;
font-weight: 500;
font-family: 'HelveticaNeue';
}
esction {
width: 100%;
padding: 0 7%;
display: table;
margin: 0;
max-width: none;
background-color: #373B44;
height: 100vh;
background-image:url("https://s15.postimg.cc/999tzxuqz/test_banner.jpg");
background-repeat:no-repeat;
background-size:cover;}
section:nth-of-type(2n) {
background-color: #FE4B74;
background-image:url("https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&h=350");
}
}
.einto {
height: 50vh;
}
.econten {
display: table-cell;
vertical-align: middle;
background: rgb(34,34,34); /* for IE */
background: rgba(34,34,34,0.75);
}
eh1 {
font-size: 3em;
display: block;
color: white;
font-weight: 300;
}
ep {
font-size: 1.5em;
font-weight: 500;
color: #C3CAD9;
}
ea {
font-weight: 700;
color: #373B44;
position: relative;
e&:hover{
opacity: 0.8;
}
Here is what is happening when I apply it as is:
https://postimg.cc/image/471owh7w7/
Your black <div> should have position: absolute, and you should in style use blur for it.
Inside that <div> will be another <div> with your text (content) and it should have position: relative and with a z-index that has a greater value than the black <div>.
I'd to like to setup a rounded button with an ionic icon in the center.
I have something like that:
button {
color: white;
&.button-rounded {
display: block;
width: 30px;
height: 30px;
line-height: 30px;
border: 2px solid white;
border-radius: 50%;
color: white;
text-align: center;
text-decoration: none;
font-size: 10px;
font-weight: bold;
}
}
And the html:
<button class="button button-clear icon ion-home button-rounded"></button>
But the result is something like that:
Any help, please?
The problem is with the font size of the icon which is bigger than the rounded button. You can reduce the font-size to 24px and line-height to the same value in order to fit the icon exactly inside the circle. Increased the specificity of the overriding selector to avoid !important
.bar .buttons .button.button-icon .icon::before, .bar .buttons .button.button-icon::before, .bar .buttons .button.button-icon.icon-left::before, .bar .buttons .button.button-icon.icon-right::before {
font-size: 24px;
line-height: 24px;
}
Updated Codepen
SASS version:
.bar .buttons .button.button-icon {
.icon::before, &::before, &.icon-left::before, &.icon-right::before {
font-size: 24px;
line-height: 24px;
}
}
I've got some Sass I've inherited that looks like below. I want to be able to specify a CSS tag to differentiate between green and another color (see anchor tag and comment).
Now, I have-
<div class="names"></div>
The link shows green. I want to be able do something like-
<div class="names myblue"></div>
And instead have it be a different color.
&.SpeakerCount3 {
.names {
text-align: center;
li {
text-align: center;
display: inline-block;
width: 82px;
margin-left: 5px;
&:first-child {
margin-left: 0;
}
}
img {
max-width: 100%;
}
h3 {
margin-top: 0;
a {
font-size: 10px;
}
}
}
}
.names {
min-height: 180px;
.photo {
margin-top: -21px;
}
img {
display: block;
border: 3px solid #282828;
margin: 0 auto;
}
h3 {
margin-top: 5px;
}
a {
font-size: 20px;
color: #5c5c5c; // this was green but I could not figure how to make it orange for css and green for kids
text-decoration: none;
}
}
.description {
margin-bottom: 15px;
min-height: 120px;
h3 {
margin: 5px 0 20px 0;
min-height: 40px;
}
}
Having seen the HTML code that was being hidden in your question, I should say that good class names generally should relate to state rather than properties - so the class name "myblue" should probably be replaced with something like "featured", "highlighted" etc. This is especially the case where you are asking for "myblue" to actually change the colour to Orange - something that may well confuse future maintainers. In the case that "myblue" is a company or feature name it may well be legitimate, but I would consider carefully if there is an alternative class name which does not include a colour name.
In Sass you could do something like-
a {
font-size: 20px;
color: #5c5c5c; // this was green but I could not figure how to make it orange for css and green for kids
text-decoration: none;
.myblue & {
color: orange;
}
}
As the "a" selector is contained within the ".names" selector though, this will result in a rendered rule of-
.myblue .names a {
color: orange;
}
As "names" is not a descendant of "myblue" in your DOM, the selector will not match - and this isn't what you want.
If you only want the rule to apply where both "names" and "myblue" are present I would write this-
.names {
min-height: 180px;
.photo {
margin-top: -21px;
}
img {
display: block;
border: 3px solid #282828;
margin: 0 auto;
}
h3 {
margin-top: 5px;
}
a {
font-size: 20px;
color: #5c5c5c; // this was green but I could not figure how to make it orange for css and green for kids
text-decoration: none;
}
&.myblue {
a {
color: orange;
}
}
}
The ampersand produces a combined selector, rather than the descendant selector you would get with a space (this is Sass only - not valid CSS).
Alternatively, if you want the "myblue" class selector to apply even without the "names" class, then simply do this-
.names {
min-height: 180px;
.photo {
margin-top: -21px;
}
img {
display: block;
border: 3px solid #282828;
margin: 0 auto;
}
h3 {
margin-top: 5px;
}
a {
font-size: 20px;
color: #5c5c5c; // this was green but I could not figure how to make it orange for css and green for kids
text-decoration: none;
}
}
.myblue {
a {
color: orange;
}
}
As the "myblue" selector appears after the "names" selector, the color property for the link will override the color set in "names" - leaving all other properties for the link and other elements intact. This solution simply utilises the CSS cascade to achieve the desired effect.