I need to position the number "01 / 04" like this image
So far I got this
Code structure is like this in vue js, so far:
<img id="theZoomImage" sizes="100vw" :srcset="imageSources(images[current])" :src="imageSource(images[current])" />
<div class="product-images-popup-bar">
<div class="product-images-popup-number">
<span class="product-images-popup-child_num">0{{current+1}}</span>
<span class="product-images-popup-parent_num">0{{totalImageNum()}}</span>
</div>
<div class="product-images-popup-pagination">pagination</div>
</div>
css so far:
.product-images-popup-bar {
position: absolute;
left: 5vw;
}
.product-images-popup-number {
display: flex;
align-items: flex-start;
}
.product-images-popup-child_num {
line-height: 1;
color: #191919;
font-weight: 600;
letter-spacing: 1px;
font-family: 'Helvetica Neue Condensed', HelveticaNeue, Helvetica, Arial, sans-serif;
font-size: 30px;
font-size: 7vw;
}
.product-images-popup-parent_num {
line-height: 1;
color: #191919;
font-weight: 600;
letter-spacing: 1px;
font-family: 'Helvetica Neue Condensed', HelveticaNeue, Helvetica, Arial, sans-serif;
font-size: 15px;
font-size: 4vw;
padding: 1px 0 0 4px;
}
.product-images-popup-parent_num:before {
content: '/';
padding-right: 5px;
}
.product-images-popup-pagination {
}
The goal is moving the numbers + pagination up a bit in different device size.
I am thinking to get "product-images-popup-bar" coordinate, then subtract some values, then position it. Not sure how to get the coordinate though.
Just give the elements you want moved up slightly a position of relative and then top minus the amount you want
for example
.product-images-popup-number {
display: flex;
align-items: flex-start;
position: relative;
top: -5px;
}
and then obviously use media queries to adjust it as you please
Related
I'm trying to design a Card but my <p> text is somehow inline. I don't want that. I tried display: block;and other options but that doesn`t work.
I work with Bootstrap and CSS but as far as I know, this is a plain CSS question.
Here is my Html for one card:
<div class="">
<div class="card">
<img class="card-img-top" src="../../../assets/images/offer_1.jpg">
<div class="card-body text-center">
<h1>{{offer.name}}</h1>
<p>{{offer.description}}</p>
<h2>{{offer.price}}€</h2>
</div>
And here my SCSS:
$font-serif: 'Playfair Display', serif;
$font-sans-serif: 'Raleway', sans-serif;
$color_price: #F96D00;
$color_description: #b8b8b8;
.card {
border-radius: 0;
.card-body {
padding: 3rem;
h1 {
font-family: $font-serif;
font-weight: bold;
line-height: 1.45;
font-size: 26px;
}
h2 {
font-family: $font-serif;
font-weight: bold;
line-height: 1.45;
font-size: 22px;
color: $color_price;
}
p {
font-family: $font-serif;
line-height: 1.45;
font-size: 18px;
color: $color_description;
height: 100px;
}
}
}
It looks like this:
Edit: The Problem is the paragraph has a flixible width but the text inside is somehow always inline and wider then the paragraph itself.
You don't need to use overflow:hidden or !important on text-align: center.
You need to set a maximum width on the card element that is the parent of the P.
Look at your styles rendered in a codepen:
https://codepen.io/NeilWkz/pen/vaaMoO
The name and price are left-aligned, and the description is center aligned.
This is because you've used a helper class 'text-center' I assume this comes from some framework that you have not mentioned in your question. The helper class will not cascade down if you have alignment set on the h1 or h2 element, in that case you need to apply it to the actual element:
HTML:
<div class="">
<div class="card">
<img class="card-img-top" src="../../../assets/images/offer_1.jpg">
<div class="card-body">
<h1 class="text-center">{{offer.name}}</h1>
<p class="text-center">{{offer.description}}</p>
<h2 class="text-center">{{offer.price}}€</h2>
</div>
</div>
SCSS:
$font-serif: 'Playfair Display', serif;
$font-sans-serif: 'Raleway', sans-serif;
$color_price: #F96D00;
$color_description: #b8b8b8;
.card {
border-radius: 0;
//Added width & background color for demo
width: 320px;
background: azure;
.text-center {
text-align: center;
}
.card-body {
padding: 3rem;
display: block;
h1 {
font-family: $font-serif;
font-weight: bold;
line-height: 1.45;
font-size: 26px;
display: center;
}
h2 {
font-family: $font-serif;
font-weight: bold;
line-height: 1.45;
font-size: 22px;
color: $color_price;
}
p {
font-family: $font-serif;
line-height: 1.45;
font-size: 18px;
color: $color_description;
height: 100px;
}
}
}
Here's a working pen with the styles above:
https://codepen.io/NeilWkz/pen/gjjJpw
I would like to reproduce the following image with CSS:
Especially important is to me that both lines have equal length:
I tried to recreate it with this code (jFiddle):
.box {
font-family: "Open Sans";
line-height: 28px;
font-weight: 700;
background-color: #2c343c;
margin: 20px;
padding: 20px;
width: 150px;
text-align: justify;
}
.box .name {
color: #fff;
font-size: 24px;
}
.box .sub {
color: #f29400;
font-size: 15px;
letter-spacing: 1px;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="box">
<span class="name">Dr. Nielsen</span><br>
<span class="sub">WEBDEVELOPER
</div>
But its not quite perfect:
Is there a good way how to achieve this with CSS so that both lines get the same lengths on any device. Or is it recommended to rather use a picture for this?
You can give a try to text-align-last:justify;
Beside, to avoid setting a width, you may turn the box into a block that shrinks on its content via display:table; . You can also avoid the <br> setting spans into blocks
.box {
font-family: "Open Sans";
line-height: 28px;
font-weight: 700;
background-color: #2c343c;
margin: 20px;
padding: 20px;
display: table;
text-align: justify;
}
span {
display: block;
text-align-last: justify;
}
.box .name {
color: #fff;
font-size: 24px;
}
.box .sub {
color: #f29400;
font-size: 15px;
letter-spacing: 1px;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="box">
<span class="name">Dr. Nielsen</span>
<span class="sub">WEBDEVELOPER</span>
</div>
<div class="box">
<span class="name">Dr. Nielsen</span>
<span class="sub">WEB-DEVELOPPER</span>
</div>
<div class="box">
<span class="name">Watch Out when top too long</span>
<span class="sub">single-short-breaks!</span>
</div>
You should remove the text-align: justify; on the container (.box) and give .name some extra letter-spacing so the 2 lines line up.
Be aware that this would be completely dependent on the font settings. Another font-family, size, etc. would change the size of both lines and make it different again. If people visiting your website changed their browser font size, then they won't see exactly what you see. If you want to avoid this (as much as possible) then look into font-size resets.
.box {
font-family: "Open Sans";
line-height: 28px;
font-weight: 700;
background-color: #2c343c;
margin: 20px;
padding: 20px;
width: 150px;
}
.box .name {
color: #fff;
font-size: 24px;
letter-spacing: .3px;
/* added */
}
.box .sub {
color: #f29400;
font-size: 15px;
letter-spacing: 1px;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<div class="box">
<span class="name">Dr. Nielsen</span>
<span class="sub">WEBDEVELOPER</span>
</div>
If I use Titillium web font family I can scroll on <span> and <input> with line-height value not normal and <1.6. But not when I use San-serif. I expect when I use line-height:1.4 there is no scroll.
I don't know, is it because of inline-block behavior?
.box {
padding: 0;
margin: 0;
background-color: white;
}
input {
display: inline-block;
line-height: 1.4;
font-size: 16px;
font-family: Titillium web;
padding: 0;
}
input.test {
line-height: 1.2;
}
input.test-2 {
line-height: normal;
}
span {
display: inline-block;
line-height: 1.4;
font-size: 16px;
font-family: Titillium web;
overflow: auto;
padding: 0;
background-color: aqua;
}
p {
font-size: 16px;
font-family: Titillium web;
line-height: 1;
padding: 0;
margin: 0;
}
<div class="box">
<span>####</span><input type="text" value='####' /><input class="test" type="text" value='####' /><input class="test-2" type="text" value='####' />
</div>
<p>#############</p>
Here are my question:
Is each font family have different optimal line-height?
If so, when I should use line-height: normal? Because many articles suggest using specific line-height
Try to use the same value in line-height and font-size. Instead of 1.4 put 16px in line-height also.
Website is get2gethersports.com
On the make page you see [content] [instagram] [blog]
I have a box shadow around instagram and blog.
I want that box shadow to stretch to the bottom of the content area.
I tried
#undrl {
height:100%;
}
but it did nothing.
any ideas?
UPDATE code for this custom html module is
<div class="span6">
<p style="text-align: center;"><strong style="color: #333333; font-family: 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; line-height: normal;"><span style="font-size: medium; font-style: italic;">Join. Create. Compete. </span></strong></p>
<div style="color: #333333; font-family: 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; line-height: normal; text-align: center;"> </div>
<div style="color: #333333; font-family: 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; line-height: normal; text-align: center;">get2gether|sports is the perfect way to organize a pick-up game of any sport. You can find a game to join, or create your own! Feel free to shoot us an email with any questions you have! </div>
<div style="color: #333333; font-family: 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; line-height: normal; text-align: center;"> </div>
<div style="color: #333333; font-family: 'Lucida Grande', Verdana, Arial, Helvetica, sans-serif; line-height: normal; text-align: center;">Subscribe below to stay in-touch with up-coming games! <br /><br /></div>
{loadposition login-join} {loadposition logout-home}</div>
<div id="undrl" class="span3" style="text-align: center;">{loadposition instagramfeed}</div>
<div id="undrl" class="span3" style="text-align: center;">{loadposition blogfeed}</div>
</div>
since your columns, [content] [instagram] [blog], are floating left, they will only take up as much space as needed. To fix this:
.item-page {
display: table;
height: 280px;
}
.item-page > div {
float: none;
display: table-cell;
margin-left: 20px;
vertical-align: middle; // or padding-top % if you don't want to declare a height on the table
}
.item-page > div:first-child
{
margin-left: 0;
}
Here's a better solution not using table-cells (wrap these items in a div and set the height to 280px if multiple rows):
.item-page
{
height: 280px;
}
#undrl {
text-align: center;
display: inline-block;
float: none;
margin-left: 20px;
height: 100%;
vertical-align: top;
width: 23%;
}
.item-page .span6
{
float: none;
display: inline-block;
}
This doesn't work because the Instagram and Blog portions are have float: left;, which breaks the flow of the document. If backwards compatibility isn't the biggest issue, I recommend using a flex-box, as this will allow you to control the size of the elements and the position of their content. This technique is supported by nearly 90% of browsers (source).
If you can't use flex-boxes, try setting all of the elements to a predefined height, that way the box shadow will extend to the height you want it to extend.
If that's also not an option (e.g. you need the elements to have a variable height), then you might benefit from using display: table; and display: table-cell;. These CSS declarations will allow the most backwards compatibility but they aren't a favorite of mine because they're slightly antiquated. It would work something like this:
.container {
display: table;
}
.child {
display: table-cell;
}
That should be a good starting point for the result you desire.
I have a div wrapped around a couple span's and using JS to make the span's fade in and out (for testimonials). Everything works, except I can't get the span text to center within the div. Here's the relevant code:
HTML -
<div class="slideshow">
<span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Hi</span>
<span style="font-size:12px; color:#333333; font-family:Lucida Grande,Lucida Sans Unicode,Calibri,Arial,sans-serif;">Goodbye</span>
</div><br />
And here's the slideshow CSS -
.slideshow {
width:940px;
height:64px;
background-image:url(../images/quotes.png);
}
Can anyone tell me what I'm doing wrong? Oh and yes I've tried text-align:center; with no luck.
[Edit] I'd like to add I've also tried adding in !important with no change.
I tested your code and just added
.slideshow {
text-align: center;
}
and the text centered just fine.
Maybe you've got a typo, or a css definition somewhere else that overrides your text-align?
Edit
I did an "inspect-element" of the fiddle posted and here are the css definitions i got:
<div class="slideshow" style="position: relative; ">
<span style="font-size: 12px; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Calibri, Arial, sans-serif; position: absolute; z-index: 3; top: 0px; left: 0px; display: block; width: 13px; height: 15px; opacity: 0.275808; ">Hi</span>
<span style="font-size: 12px; color: rgb(51, 51, 51); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Calibri, Arial, sans-serif; position: absolute; top: 0px; left: 0px; display: block; width: 52px; height: 15px; z-index: 2; opacity: 0.724192; ">Goodbye</span>
</div>
element.style {
color: #333;
display: block;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Calibri, Arial, sans-serif;
font-size: 12px;
height: 15px;
left: 0px;
opacity: 1;
position: absolute;
top: 0px;
width: 52px;
z-index: 3;
}
I would say the "display: block" is your problem.
You need to apply text-align: center to the containing <div>, and not do anything that causes the <span>s to be rendered as a block (such as floating them). Absolute positioning would also pull elements out of normal flow so they wouldn't be influenced by text-align.
Update : Now a working example has been provided, we can see what is going on. The span elements are being absolutely positioned by the plugin:
$slides.css({position: 'absolute', top:0, left:0}).hide()
Looks like you will need to rethink the layout logic the plugin is using.