How can i display the two links for small screen one after another. Now the two links are left and right. But i want those link one up and another at bottom.
<div className="homeContent">
<div className="content">
<h1>Text</h1>
<div className="pdf">
XX Download
BB Download
</div>
</div>
</div>
#media screen and (max-width:580px){
.homeContent {
h1 {
font-size: 3rem !important;
}
.content {
.pdf {
a {
// one after another
}
}
}
}
}
Adding display:block on a will do what you want, like so (I am using css so that it works here):
#media screen and (max-width: 580px) {
a {
display: block;
}
}
<div className="homeContent">
<div className="content">
<h1>Text</h1>
<div className="pdf">
XX Download
BB Download
</div>
</div>
</div>
Related
I've coded a site, but I have a question - I have 2 different paragraphs in the same div, but one of them should only show when the screen is 600 or over. Can it be done this way? or should I wrap my in a secondary inside the first
<span class="me-square">
<div class="me-wrapper">
<h3>ABOUT ME</h3>
<p>My name is Katrine, but my friends call me Mira. I’m 20 years old and I live in Denmark.
<p id="me-2ndtext">I want this text to only show when the screen is 600 or over</p>
</div></span>
CSS
#me-2ndtext{
display: none;
}
#media screen and (min-width: 601px) {
div#me-2ndtext {
display: block;
}
}
I would go like this
#media screen and (max-width: 601px) {
#me-2ndtext {
display: none;
}
}
Simple Version
HTML:
<span class="me-square">
<div class="me-wrapper">
<h3>ABOUT ME</h3>
<p>My name is Katrine, but my friends call me Mira. I’m 20 years old and I live in Denmark.
<p id="me-2ndtext">I want this text to only show when the screen is 600 or over</p>
</div>
</span>
CSS:
#media screen and (max-width: 599px) {
p#me-2ndtext {
display: none;
}
}
Or when it's all times the second paragraph you can make it like this:
You don't need the extra id then.
HTML:
<span class="me-square">
<div class="me-wrapper">
<h3>ABOUT ME</h3>
<p>My name is Katrine, but my friends call me Mira. I’m 20 years old and I live in Denmark.
<p>I want this text to only show when the screen is 600 or over</p>
</div>
</span>
CSS:
#media screen and (max-width: 599px) {
p:nth-of-type(2) {
display: none;
}
}
Using FlexBox and Sass, I am trying to create stacked vertical bars as shown in the images pasted below. What I am expecting is the vertical text to take up the one-columned row, creating a stacking effect. What is happening, though, is the text is overlapping.
The html mark up is like so:
<div class="container__row">
<div class="container__col-sm-12 container__col-md-6 container__col-md-6">
<h1>Another section</h1>
</div>
<div class="container__col-sm-12 container__col-md-6 container__col-md-6">
<div class=container__row>
<div class="container__col-sm-12 container__col-md-12 container__col-md-12 skills-bar">
Front-End Technologies
</div>
</div>
<div class=container__row>
<div class="container__col-sm-12 container__col-md-12 container__col-md-12 skills-bar">
Front-End Technologies
</div>
</div>
<div class=container__row>
<div class="container__col-sm-12 container__col-md-12 container__col-md-12 skills-bar">
Design
</div>
</div>
<div class=container__row>
<div class="container__col-sm-12 container__col-md-12 container__col-md-12 skills-bar">
GIS
</div>
</div>
</div>
<div class="container__row">
This is the Sass .scss code that makes up the css styling:
//site container with set max width
$grid__bp-md: 768;
$grid__bp-lg: 992;
$grid__cols: 12;
//sass map to define breakpoints
$map-grid-props: ('-sm':0, '-md': $grid__bp-md, '-lg' : $grid__bp-lg);
//mixin to dynamically create media query for each breakpoint
#mixin create-mq($breakpoint) {
#if($breakpoint == 0) {
#content;
} #else {
#media screen and (min-width: $breakpoint *1px) {
#content;
}
}
}
#mixin create-col-classes($modifier, $grid__cols, $breakpoint) {
#include create-mq($breakpoint) {
//class to set up columns for all screen sizes - mobile first
#for $i from 1 through $grid__cols {
&__col#{$modifier}-#{$i} {
flex-basis: (100 / ($grid__cols / $i)) * 1%;
}
}
}
}
.container {
max-width: $grid__bp-md * 1px;
margin: 0 auto;
//attribute to override max width
&--fluid {
margin: 0;
max-width: 100%;
}
//attribute to position row's child elements. remove overflow with wrap and 100% width for nesting
&__row {
display: flex;
flex-wrap: wrap;
width: 100%;
}
#each $modifier, $breakpoint in $map-grid-props {
#include create-col-classes($modifier, $grid__cols, $breakpoint);
}
}
p {
font-size: .85em;
color: #aaa;
}
}
.skills-bar {
transform: rotate(90deg);
transform-origin: left top 0;
float: left;
}
There is this strange overlap that happens. Can anyone suggest why the vertical text won't make rows?
If you look in the inspector, you can see that the original height of the container isn't being effected by the transform and that's why this is happening. I can't think of a way around it without measuring the new height after the transform with js.
I'm not sure what browsers you need to support, but text-orientation / writing-mode will do, mostly, what you need without js.
.skills-bar {
writing-mode: sideways-lr; // only supported in FF, use 'vertical-lr' for more support
text-orientation: upright;
float: left;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode
https://developer.mozilla.org/en-US/docs/Web/CSS/text-orientation
In order to measure the divs after the css transform, I used getBoundingClientRect().
With a few lines of jquery, I got what I needed:
$(document).ready(function(){
var skills = $(".skills-bar")
$.each(skills, function(i, div) {
console.log(div);
var dimensions = div.getBoundingClientRect();
console.log(dimensions);
$(this).css("width", dimensions.width).css("height", dimensions.height);
});
});
I'm using a navigation guide of my site whith anchors which I want to be displayed on the same line. On computers there is no problems as the width of the screen is bigger than the length of my text (only 5 words), but on mobile phones the text writes on two differents lines.
I have tried to add the CSS property white-space: nowrap; to the div containing the text but with this the part of the text that doesn't fit on the line simply would disapper by the overflow of the page. Is there a way to combine this property with another one so that if the text doesn't fit on one line the size of the text decrease to a size which would fit?
I'm using BootStrap 4 btw.
HTML
<section>
<div class="container">
<div class="row mb-5">
<div class="col-12 nowrap">
<a class="mr-1 noDecoration" href="tienda.php">Tienda</a> > <a class="mx-1 noDecoration" href="tienda.php#sudaderaIcon">Sudaderas</a> > <span class="ml-1">Sudadera Tape Verde</span>
</div>
</div>
</div>
</section>
CSS
.nowrap {
white-space: nowrap;
}
.noDecoration, .noDecoration:hover {
text-decoration: none;
color: #000000;
}
You should use media queries to change the font size base on screen width
#media screen and (max-width : 320px)
{
#your-element
{
font-size:7px; /* or 1em */
}
}
#media screen and (max-width : 1204px)
{
#your-element
{
font-size:16px;
}
}
You can also try vw, vh, vmin mentioned here, but its not widely supported.
Try this code, see the snippet in full-page and resize the browser window
.nowrap {
white-space: nowrap;
font-size: 14px; // Added
font-size: 3.4vw; // Added
}
.noDecoration, .noDecoration:hover {
text-decoration: none;
color: #000000;
font-size: 14px; // Added
font-size: 3.4vw; // Added
}
<section>
<div class="container">
<div class="row mb-5">
<div class="col-12 nowrap">
<a class="mr-1 noDecoration" href="tienda.php">Tienda</a> > <a class="mx-1 noDecoration" href="tienda.php#sudaderaIcon">Sudaderas</a> > <span class="ml-1">Sudadera Tape Verde</span>
</div>
</div>
</div>
</section>
working fiddle here
I am trying to change the position of a tooltip on a mobile view to view upwards rather than to the left and right as they are currently on a larger screen. The tooltips currently display to the left for the button on the left and to the right for the button on the right since they have whitespace in those areas but on the mobile views they don't to I would like to change the "data-placement" to "top" using CSS but only when viewing with a mobile phone (less than 400). My current CSS is listed below for the circumstances I have listed.
HTML:
#button-container {
height: 100px;
margin-top: 15%;
#Mission {
width: 45%;
a {
h5 {
font-size: 18px;
}
}
}
#HowItWorks {
width: 45%;
a {
h5 {
font-size: 18px;
}
}
}
}
<div id="button-container" class="container">
<!-- Container -->
<div class="row">
<div class="col-lg-3"></div>
<!-- Spacing -->
<div id="Mission" class="btn col-lg-3" data-toggle="tooltip" data-placement="left" title="
We believe that in order to achieve continuous joy one needs to unselfishly create joy for those around them. The Joy Project assists local members of the community through acts of kindness.">
<!-- Mission button -->
<!-- Tooltip Hover -->
<a href="/mission">
<h5><b>Our Mission</b></h5>
</a>
</div>
<div id="HowItWorks" class="btn col-lg-3" data-toggle="tooltip2" data-placement="right" title="
Friends of the Joy Project “nominate” someone in need and then mobilize to meet this need and spread joy in our communities.">
<!-- How It Works button -->
<!-- Tooltip Hover -->
<a href="/howitworks">
<h5><b>How It Works</b></h5>
</a>
</div>
<div class="col-lg-3"></div>
<!-- Spacing -->
</div>
</div>
<!-- /Container -->
If you only want the placement to be top on certain widths, I'd suggest looking at the #media css rule. Because of the way tooltips directions are declared (in the div) you might have to create two divs and determine which one to show based on the height.
#media only screen and (max-width: 400px) {
.tooltip .leftTooltip {
display: none;
}
.tooltip .topTooltip {
display: visible;
}
}
#media only screen and (min-width: 400px) {
.tooltip .leftTooltip {
display: visible;
}
.tooltip .topTooltip {
display: none;
}
}
<style>
.main_block{}
.main_block:hover{}
.heading{background-color:red}
.content{background-color:blue}
</style>
<div class="main_block">
<div class="heading">
New Product
</div><br>
<div class="content">
This is my new product
</div>
</div>
I want to change heading div to background-color:orange and content div to background-color:yellow whenever hovering over the main_block using only CSS
Voila!
You need to start with the main-block, isolate its :hover state, then narrow by the child element- requiring one rule for each per below:
.heading {
background-color: red
}
.content {
background-color: blue
}
.main_block:hover .heading {
background-color: orange
}
.main_block:hover .content {
background-color: yellow
}
<div class="main_block">
<div class="heading">
New Product
</div>
<br>
<div class="content">
This is my new product
</div>
</div>
you can do this in LESS or SASS like so.
.main_block{
&:hover{
.heading {
background-color:orange;
}
.content {
background-color:yellow;
}
}
}