Responsive absolute positioned elements - responsive-design

I have an image slider but need to have a link on one side. I have currently set the link where I want it on the image but it doesn't scale down when the screen is resized.
How do I get this absolute positioned element to scale down with the screen size and move with the image resizing?
here is a JSFiddle https://jsfiddle.net/s0v6j04a/
<div class="sliders">
<div class="slider"><div id="promo1">
<div id="promo-link">
TEST LINK
</div>
<img src="https://unsplash.imgix.net/photo-1434139240289-56c519f77cb0?fit=crop&fm=jpg&h=700&q=75&w=1050" />
</div>
</div>
</div>
#slider{
position:relative;
}
.div1, .div2 {
min-height: 400px;
background: #D25A1E;
position: relative;
width: calc(50% - 30px);
}
.div1 {
float: left;
background-image: url('https://ununsplash.imgix.net/photo-1433838552652-f9a46b332c40?fit=crop&fm=jpg&q=75&w=1050') !important;
background-repeat: no-repeat;
background-position: center center;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
}
.div2 {
float: right;
background-image: url('https://ununsplash.imgix.net/photo-1427805371062-cacdd21273f1?fit=crop&fm=jpg&q=75&w=1050') !important;
background-repeat: no-repeat;
background-position: center center;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
}
.div1:after, .div2:before {
content:'';
position: absolute;
top: 0;
width: 0;
height: 0;
}
.div1:after {
left: 100%;
border-top: 400px solid #D25A1E;
border-right: 50px solid transparent;
}
.div2:before {
right: 100%;
border-bottom: 400px solid #D25A1E;
border-left: 50px solid transparent;
}
#promo1{width:100%; position:relative;}
#promo1 img{width:100%;}
#promo-link{
position: absolute;
z-index: 100000;
left: 25%;
top: 50%;
font-size: 30px;
padding: 20px 40px;
border: 2px solid #fff;
}
#promo-link a{
text-decoration:none;
color:#fff;
font-family:"Times New Roman", Times, serif
}

Related

Trouble displaying text over background image in React.js

I want to display text over this background image using React.js. Not sure if I am missing code in my App.js file? or css file?
this is what I have in my App.js file so far:
import React from 'react';
import '../styles/App.css';
const App = () => {
return (
<div id="port">
<div id="name">
<p>Nicole M. Cuellar</p>
</div>
</div>
);
}
this is in my css file:
#port {
background-image: url('../images/largebulb.jpg');
background-size: cover;
background-position: center center;
position: relative;
top: 0;
bottom: 0;
height: 100vh;
z-index: -10;
}
#name {
font-family: 'Cinzel', serif;
font-size: 45px;
display: flex;
left: 0;
line-height: 200px;
margin-top: -100px;
position: absolute;
text-align: center;
top: 50%;
width: 100%;
z-index: -40;
}
You have a CSS issue, this isn't a node issue. I've attached some quick direction for thought.
#port {
z-index: -10;
height: 100vh;
background-image: url('https://images.unsplash.com/photo-1568050231220-41aae5663af6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80');
background-size: cover;
background-position: center center;
position: relative;
}
#name {
position: absolute;
font-size: 45px;
margin: 0;
padding: 0;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%, -50%);
font-family: 'Cinzel', serif;
white-space: nowrap;
}
<div id="port">
<div id="name">
<p>Nicole M. Cuellar</p>
</div>
</div>

Unable to adjust the responsiveness of words on header

I created a sort of div banner element on the top of my page and had a second transparent element overlayed in an absolute position over it. The problem is that the words in this absolute element will not resize as the page size decreases, in other words, they are not very responsive. How can I fix this?
CSS
.full{
min-height: 100%;
background-color: white;
/*background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.3) 90%), url("america/cservice.jpeg");*/
/*background-blend-mode: lighten;*/
padding-top:25px ;
color: #5a5a5a;
/*color: black;*/
padding-bottom: 20px;
text-align: center;
align-items: center;
border-top: 5px solid rgba(0, 0, 102, 0.5);
border-bottom: 5px solid rgba(0, 0, 102, 0.5);
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.image{
width: 100%;
height: 280px;
background-image: url(america/news2.png);
background-size: cover;
background-repeat: no-repeat;
position: relative;
padding-top: 20px;
padding-bottom: 20px;
display: block;
margin: 0 auto;
}
.bor {
position: absolute;
border: 5px solid;
border-color: rgba(255, 255, 255, 0.5);
padding-top:15px;
padding-bottom:;
background-color: rgba(133, 133, 173, 0.4);
left: 0;
right: 0;
bottom: 20;
top: 20;
padding-left: 20px;
padding-right: 20px ;
margin-right: 250px;
margin-left: 250px;
}
h2 {
position: absolute;
width: 100%;
color: black;
font-size: 40px;
padding-top:15px;
font-weight: 900;
}
h4 {
position: relative;
width: 100%;
color: black;
font-size: 30px;
font-weight: 900;
padding-top: 95px;
padding-bottom: 25px;
font-stretch: ultra-expanded;
}
b{
border: 5px solid black;
padding-right: 25px;
padding-left: 25px;
margin-left: 20px;
margin-right: 20px;
color: white;
font-weight: 900;
font-size: 40px;
}
HTML
<div class="full">
<div id="section">
<h1 class="text-center">—News Feed—</h1>
<br>
<hr>
<div class="image">
<div class="bor">
<h2>Weekly<b>Report</b></h2>
<br>
<h4>—Catch up on all the latest news regarding the world—</h4>
</div>
</div>
</div>
</div>
Is this closer to what you are looking for?
https://codepen.io/panchroma/pen/WEygZE
The key change I made was this:
h2 {
/* position: absolute; */ /* new */
position:relative; /* new */
}
Search the css for 'new' to see other less important edits.
This still needs work but hopefully it will get you unstuck.
Good luck!

Bootstrap dropdown is hidden behind other elements - Stacking Context issue

Boostrap dropdown is hidden inside other elements. When I try to click on pencil icon it shows dropdown but some other elements are overriding it. I made position of dropdown relative but it increases site of Div tag. attaching screenshot.
new
Christeen
Last modified 4-5-2016 at 23:16
Share
Edit
Delete
CSS
.listing-body ul.listbody {
margin: 0;
padding: 0;
display: block;
list-style: none;
}
.listing-body ul.listbody li {
margin: 0;
padding: 0;
list-style: none;
float: left;
width: 100%;
background: #FFF;
border: 1px solid #dadada;
border-top: none;
}
.listing-body .fourthli {
width: 25%;
float: left;
margin: 0;
padding: 0 1%;
color: #000;
font-family: 'robotoregular';
font-size: 12px;
line-height: 45px;
color: #333;
text-align: left;
box-sizing: border-box;
overflow: hidden;
max-width: 50%;
text-overflow: ellipsis;
white-space: nowrap;
}
.dropdown-menu {
position: absolute;
top: 100%;
right: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
list-style: none;
font-size: 14px;
background-color: #fff;
border: 1px solid #ccc;
border: 1px solid rgba(0,0,0,.15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
box-shadow: 0 6px 12px rgba(0,0,0,.175);
background-clip: padding-box;
}
The overflow:hidden in the .listing-body .fouthli was cropping off the dropdown menu. Removing it fixed it.

how to give margin between li using css?

]I am trying to make a breadcrumb as shown in the image below. I am able to make this thanks to some Google searching, But I have few issues:
It is not responsive. Why? when I decrease window width breadrumb also decrease as same as header which work on all resolution .In other words when we decrease width it fontsize and width according to screen resolution
There is a margin between two li as shown in image. I used the margin property, but it doesn't seem to be effective.
here is my code
http://codepen.io/anon/pen/eNPExE
/* Styles go here */
.breadcrumb_nav_div{
top:44px;
position:absolute;
width:100%;
background-color:lightgrey;
padding:0.8em 0em 0.5em 1em;
}
.breadcrumb {
list-style: none;
overflow: hidden;
font: 14px Helvetica, Arial, Sans-Serif;
}
.breadcrumb li {
float: left;
margin-left:5px
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 0px 10px 55px;
background: grey; /* fallback color */
background: grey;
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid grey;
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
.breadcrumb li:first-child a {
padding-left: 10px;
}
.breadcrumb li:nth-child(2) a { background: grey; }
.breadcrumb li:nth-child(2) a:after { border-left-color: grey; }
.breadcrumb li:nth-child(3) a { background: grey; }
.breadcrumb li:nth-child(3) a:after { border-left-color: grey; }
.breadcrumb li:nth-child(4) a { background:grey; }
.breadcrumb li:nth-child(4) a:after { border-left-color: grey; }
To increase the spacing between the icons use:
.breadcrumb li a:before {
margin-left: 5px; /* Increase this number for thicker space */
}
But your question is unclear as to the responsiveness. What exactly do you want to achieve?

IE 7 - getting extra padding on bottom of footer, any fixes?

Here is my css for my footer. It is supposed to be at the very bottom of the page, but for some reason in IE 7 .. i am getting about 10px of extra margin. Any fixes?
/* FOOTER ********************************************************************************************************************/
#footer-bg { margin: 0px auto; padding: 0px; width: 100%; text-align: center; background: url(../images/footer-bg.jpg) top left repeat-x #123800; }
#footer { margin: 0px auto; padding-bottom:30px; width: 900px; font:11px Verdana, Arial, Helvetica, sans-serif; background: #123800 url(../images/footer.jpg) top center no-repeat; color: #b8ceae; text-align: justify!important; }
#footer .footer-nav { margin: 0px; padding: 160px 0px 3px 0px; font-size:11px; color: #789a47; }
#footer p { color:#f9ffe9; margin: 0px; padding: 0px; }
#footer .devby { margin:0px; padding: 15px 0px 0px 40px; height:20px; background:url(../images/prosites.png) left center no-repeat; }
#footer br { display: none!important; } /* nuke coded breaks*/
Use negative margins.

Resources