I have this html:
<div class="banner-right">
<img src="images/circle-icon.png" alt="">
<p class="rotate mt-40">和小物</p>
<p class="rotate mta">和小物</p>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
</div>
I want to select the first and last p element so that I can increase it's font size to 20px and 15px
My scss code:
.banner-right {
width: 122px;
max-width: 100%;
display: flex;
align-items: center;
flex-direction: column;
padding-top: 15px;
margin: 0 auto;
img {
width: 25px;
}
.swiper-pagination {
position: relative;
}
.swiper-pagination-bullet {
border-radius: 0;
margin-right: 5px;
background-color: transparent;
border: 1px solid #000;
&.swiper-pagination-bullet-active {
background-color: #000;
outline: 0;
}
}
&:first-of-type {
p {
font-size: 20px;
}
}
&:last-of-type {
p {
font-size: 15px;
}
}
}
But doesn't work :(
At the moment, your Sass will compile to:
.banner-right:first-of-type p
But you want it to be:
.banner-right p:first-of-type
So change your Sass as follows:
.banner-right {
p:first-of-type {
font-size: 20px;
}
p:last-of-type {
font-size: 15px;
}
}
Related
I'm coding 3 boxes. There is pic and title at first column, then there is paragraph and at the bottom there is a link. So the boxes are not editable, just the content is. They should look the same no matter how long the title is. But the length of title changes size of pictures.
When the title needed more than one line, the pic shrank. So I added to my code a min-width. Now the ones previosly problematic are OK, but the third are wider than before, than the two other. Now the css code for pic looks like this. It is an icon with border (as you can see):
background-size: 40px 40px;
border: 2px solid $primary-green;
border-radius: 10px;
height: 56px;
margin-bottom: 10px;
min-width: 56px;
What should I add/change to make all 3 pics looks the same?
Structure:
<div class="box box--product">
<div class="box__content">
<div class="box__title d-flex">
<div class="box__icon" style="background-image: url(\''.($atts['icon'] ? wp_get_attachment_image_src($atts['icon'], 'full')[0] : '').'\');"></div>
<div class="box__icon box__icon--hover" style="background-image: url(\''.($atts['icon_hover'] ? wp_get_attachment_image_src($atts['icon_hover'], 'full')[0] : '').'\');"></div>
<h3 class="box__hdl">'.$atts['nadpis'].'</h3>
</div>
<div class="box__excerpt match-height">
<p>'.$content.'</p>
</div>
<div class="box__more">
<hr>
Viac informácií
</div>
</div>
</div>
Sass:
.box {
$this: &;
background: $gray-lighter;
border-bottom: 7px solid $primary-green;
color: $black;
cursor: pointer;
//margin-bottom: $grid-gutter-width;
&--not-hover {
cursor: default;
}
&__title {
align-items: center;
&--subprod {
margin-bottom: 16px;
//min-height: 75px;
}
}
&__more {
text-align: center;
}
&__icon {
background: {
position: center;
repeat: no-repeat;
size: auto 44px;
}
border: 1px solid $gray-dark;
border-radius: 5px;
height: 80px;
margin-bottom: 16px;
margin-right: 10px;
width: 80px;
&--big {
background-size: 65px auto;
border-width: 2px;
height: 112px;
margin-bottom: 40px;
margin-top: 20px;
width: 112px;
}
&--hover {
border-color: $white;
display: none;
}
}
&__excerpt {
font-size: 14px;
letter-spacing: .44px;
line-height: 21px;
margin-top: 10px;
}
&--product {
border-bottom-width: 7px;
#{$this}__hdl {
color: $primary-green;
font-size: 16px;
line-height: 20px;
margin-left: 10px;
text-transform: uppercase;
}
#{$this}__content {
padding: 15px 22px 5px;
}
#{$this}__icon {
background-size: 40px 40px;
border: 2px solid $primary-green;
border-radius: 10px;
height: 56px;
margin-bottom: 10px;
min-width: 56px;
&--hover {
border-color: $white;
}
}
#{$this}__excerpt {
// border-bottom: 1px solid $primary-green;
color: $gray-dark;
margin-bottom: 15px;
}
#{$this}__more {
.link-warning,
.link-more {
letter-spacing: .4px;
margin-bottom: 10px;
}
}
&:hover,
&:focus {
#{$this}__hdl {
color: $white;
}
#{$this}__excerpt {
border-bottom-color: $white;
}
#{$this}__more {
.link-warning {
&::before {
background-image: url('../images/icon-warning--white.svg');
}
}
}
}
}
Something like this ?
.card {
width: 200px;
height: 300px;
display: inline-block;
margin: 12px;
border: 1px solid black;
overflow: hidden;
display: flex;
flex-flow: column;
}
.card .title {
flex: 0 0 32px;
width: 100%;
line-height: 32px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card .link {
color: blue;
text-decoration: underline;
flex: 0 0 32px;
width: 100%;
line-height: 32px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.card .image {
flex: 1 1 auto;
overflow: hidden;
}
.card .image img {
height: 100%;
width: 100%;
object-fit: cover;
}
<div class="card">
<div class="title">Some title</div>
<div class="image">
<img src="https://picsum.photos/200/300">
</div>
<div class="link">Some link</div>
</div>
<div class="card">
<div class="title">Some title that is way too long to fit in 200px</div>
<div class="image">
<img src="https://picsum.photos/1024/768">
</div>
<div class="link">Some link that is also way too long for this little box</div>
</div>
Well, it is not probably best practise. But I just add
max-width: 57px; (+1px)
and it works just fine.
so I'm trying to create my blog using the react framework, but I'm facing an issue here.
I really have been trying to tweaks settings on the css, html or even try to switch to grid instead of flexbox but I can't figure out how to make the "fixed" navbar detected by the flexbox.
Currently, the navbar works fine I guess, but the content that is supposed to be on the right, is not taking the place it should, it's taking the entire screen instead of the rigth section next to the navbar.
Some help would be highly appreciated !
body {
overflow: hidden;
height: 100vh;
top: 0;
left: 0;
margin: 0;
}
/*left box -Navbar*/
.nav-tab-text{
font-size: 1.6em;
display: block;
padding: 00px 0px 50px 0px;
text-align: center;
list-style-type: none;
display: flex;
}
.nav-tab a {
display: block;
text-align: center;
padding: 15px 18px;
text-decoration: none;
font-size: 18px;
color: aliceblue;
}
.nav-tab {
background-color: blue;
height: 100vh;
width: 18%;
border: 3px solid red;
position: fixed;
}
/*Right box - Home content*/
.home-content-container {
width: 100%;
height: 100vh;
border: 5px solid green;
}
.home-content-title {
text-align: center;
font-size: 1.7em;
text-decoration: underline;
text-decoration-thickness: 3px;
}
.home-content-featured{
border: 3px solid purple;
width: 50%;
height: 50%;
align-self: center;
margin-top: 3%;
}
.test{
display: flex;
}
function Navbar() {
return (
<div className="flex-container">
{/*left box - Navbar*/}
<nav className="nav-tab">
Home
Articles
Archives
About
</nav>
{/*Right box - Home content*/}
<div className="home-content-container">
<div className="home-content-title">
<h3>Name</h3>
</div>
<div className="home-content-featured">
<p>1</p>
</div>
</div>
<div className="test">
<p>2</p>
</div>
</div>
);
}
export default Navbar;
import Navbar from "./components/Navbar";
function App() {
return (
<div>
<Navbar />
</div>
);
}
export default App;
body {
overflow: hidden;
top: 0;
left: 0;
margin: 0;
}
/*left box -Navbar*/
.flex-container{
display: flex;
flex-flow: row;
}
.nav-tab a {
display: block;
text-align: center;
padding: 15px 18px;
text-decoration: none;
font-size: 18px;
color: aliceblue;
}
.nav-tab {
background-color: blue;
height: 100vh;
width: 18%;
border: 3px solid red;
}
/*Right box - Home content*/
.home-content-container {
width: 100%;
height: 100vh;
border: 5px solid green;
display: flex;
flex-direction: column-reverse;
}
.home-content-title {
text-align: center;
font-size: 1.7em;
text-decoration: underline;
text-decoration-thickness: 3px;
}
.home-content-featured{
border: 3px solid purple;
width: 50%;
height: 50%;
margin-top: 3%;
align-self: center;
}
I have been having trouble centering the .content div in any device. In some devices, the .content is exactly centered but not in others. I use padding-top to push the .content down so it could be placed on the center of any device. What should I do to center the .content in any device using padding-top? Should I use Javascript in this kind of situation?
body {
margin: 0;
}
.whole {
height: 100vh;
background: #d44949;
}
header:after {
content: '';
display: table;
clear: both;
}
.logo {
font: 1.4em 'Open Sans',sans-serif;
color: #fcfcfc;
text-transform: uppercase;
float: left;
margin-left: 15px;
}
.logo > span {
font-style: italic;
color: #d8d8d8;
}
.header-nav {
float: right;
margin: 20px 15px 0 0;
}
.header-nav > a {
color: #fafafa;
text-decoration: none;
font: 1em 'Open Sans',sans-serif;
font-weight: 300;
}
.header-nav > a:not(:first-child) {
margin-left: 15px;
}
.header-nav > a:hover {
color: yellow;
}
.content {
display: flex;
flex-direction: column;
padding-top: calc(100vh / 2);
}
.content > img {
width: 200px;
height: 200px;
border-radius: 50%;
margin: auto;
}
.content-nav {
margin: auto;
padding-top: 20px;
}
.content-nav > a {
color: #fafafa;
text-decoration: none;
font: 1em 'Open Sans',sans-serif;
font-weight: 300;
}
.content-nav > a:not(:first-child) {
margin-left: 10px;
}
<div class="whole">
<header>
<h1 class="logo">Max<span>&</span>Spoon</h1>
<div class="header-nav">
Download
Docs
Tutorial
Reference
</div>
</header>
<div class="content">
<img src="http://emblemsbf.com/img/36593.jpg" alt="logo">
<div class="content-nav">
Home
Blog
Forum
Stuff
</div>
</div>
</div>
As you are already using flex you could remove the padding-top and add align-items: center; to your .content.
So your CSS for .content becomes:
.content {
display: flex;
flex-direction: column;
align-items: center;
}
Here's the updated snippet.
body {
margin: 0;
}
.whole {
height: 100vh;
background: #d44949;
}
header:after {
content: '';
display: table;
clear: both;
}
.logo {
font: 1.4em'Open Sans', sans-serif;
color: #fcfcfc;
text-transform: uppercase;
float: left;
margin-left: 15px;
}
.logo > span {
font-style: italic;
color: #d8d8d8;
}
.header-nav {
float: right;
margin: 20px 15px 0 0;
}
.header-nav > a {
color: #fafafa;
text-decoration: none;
font: 1em'Open Sans', sans-serif;
font-weight: 300;
}
.header-nav > a:not(:first-child) {
margin-left: 15px;
}
.header-nav > a:hover {
color: yellow;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
}
.content > img {
width: 200px;
height: 200px;
border-radius: 50%;
margin: auto;
}
.content-nav {
margin: auto;
padding-top: 20px;
}
.content-nav > a {
color: #fafafa;
text-decoration: none;
font: 1em'Open Sans', sans-serif;
font-weight: 300;
}
.content-nav > a:not(:first-child) {
margin-left: 10px;
}
<div class="whole">
<header>
<h1 class="logo">Max<span>&</span>Spoon</h1>
<div class="header-nav">
Download
Docs
Tutorial
Reference
</div>
</header>
<div class="content">
<img src="http://emblemsbf.com/img/36593.jpg" alt="logo">
<div class="content-nav">
Home
Blog
Forum
Stuff
</div>
</div>
</div>
I would like to put a header and a button on the same horizontal line but on opposite sides of the page (left and right). I'm using Twitter Bootstrap so I've put them in a .row and then specified that they each are .col.sm-6. I put the button in a div, so I could move it to the right of that column with text-align:right.
How could I make that button center itself on mobile? When the window gets smaller and the second column jumps under the first, the button is still right-aligned.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css">
<div class="row">
<h1 class="col-sm-6">Resources</h1>
<div class="col-sm-6" style="margin-top: 20px">
<button style="text-align:right">Sign up your event</button>
</div>
</div>
You can define a class for your button like <button class="button">Sign up your event</button> and then use #media-queries to center it using the following CSS when the window size is reduced to mobile width, like this:
#media (max-width: 768px) {
.button {
display: block;
margin: 0px auto;
}
}
Here's a working demo (view as full page and then reduce your browser window):
.outfitcontainer {
position: relative;
width: 200px;
height: 80%;
background-color: #FFFFFF;
display: inline-block;
margin-left: 60px;
margin-top: 20px;
margin-bottom: 20px;
padding: 20px;
}
.outfit img {
display: inline-block;
}
.outfit,
.overlay {
position: absolute;
width: 200px;
height: auto;
left: 0;
}
.outfit {
z-index: 10;
background-color: white;
}
.outfitcontainer:hover .outfit {
opacity: .5;
cursor: pointer;
}
.outfit:hover + .overlay {
z-index: 50;
}
.overlay:hover {
z-index: 50;
}
.overlay {
z-index: 0;
text-align: center;
font-weight: bold;
}
.overlay p {
display: block;
padding: 10px 0;
color: black;
opacity: 1;
line-height: 50%;
}
.overlay p:nth-child(1) {
margin-top: 50%
}
.price,
.item {
font-family: "Brandon Grotesque Medium";
font-size: 1em;
color: #000000;
line-height: 25%;
margin-top: -10px;
}
.oldprice {
text-decoration: line-through;
color: #383838;
font-size: .75em;
line-height: 25%;
}
.designer {
font-family: "Didot Light Italic";
font-size: 1em;
color: #000000;
line-height: 25%;
margin-top: -15px;
}
.second-section {
width: 100%;
height: auto;
z-index: 50;
background-color: #000000;
}
.button {
text-align: right;
}
#media (max-width: 768px) {
.button {
display: block;
margin: 0px auto;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<h1 class="col-sm-6">Resources</h1>
<div class="col-sm-6" style="margin-top: 20px">
<button class="button">Sign up your event</button>
</div>
</div>
I couldn't set inline elements background like this:
My code is this:
#divMansetKategoriHaberleriContainer
{
background-color: Transparent;
margin-top: 4px;
font-size: 12px;
}
.divKategoriHaberItem
{
float: left;
background-color: White;
width: 324px;
height: 126px;
margin: 0;
padding: 0;
}
.divKategoriHaberItemImage
{
float: left;
width: 80px;
height: 80px;
border: 1px solid red;
margin: 2px;
}
.imgKategoriHaberResim_Cevre
{
width: 95%;
height: 95%;
}
.divKategoriHaberItemBaslikIcerik
{
}
.spHaberBaslik_Cevre
{
background-color: Green;
display: inline;
font-weight: bold;
padding: 5px;
height: 20px;
}
.spHaberIcerik_Cevre
{
display: block;
}
.divKategoriHaberDevami_Cevre
{
background-image: url('../images/HaberinDevami_Cevre.png');
background-repeat: no-repeat;
background-position: right;
height: 13px;
}
<div class="divKategoriHaberItem">
<div class="divKategoriHaberItemImage">
<img src='' alt='DÜNYANIN MEKANİK Dengesi Bozuldu' class="imgKategoriHaberResim_Cevre" />
</div>
<div class="divKategoriHaberItemBaslikIcerik">
<span class="spHaberBaslik_Cevre">
<a href='CevreHaber.aspx?id=2128'>DÜNYANIN MEKANİK Dengesi Bozul</a>
</span>
<span class="spHaberIcerik_Cevre">Demokratik Kongo Cumhuriyeti'n</span>
</div>
<div class="divKategoriHaberDevami_Cevre"></div>
</div>
PS: Sorry for i couldn't write with sentences :(
If i understand the question correctly, you will need to add a line-height that equals the total height of your inline element ...
in your case that would be 30px (20px for the height + 10px for the padding 5px top and 5px bottom..)
.spHaberBaslik_Cevre
{
background-color: Green;
display: inline;
font-weight: bold;
padding: 5px;
height: 20px;
line-height:30px; /*height + padding-top +padding-bottom*/
}