I am having an issue with making my text responsive with the image its placed with, specifically in mobile view.
Here is how the module looks in desktop/tablet view:
And here is how it looks in mobile view:
The issue here is that I want the image boxes in mobile view to be center aligned. However, when I centre align the div with the images, the text is still placed on the left side, and not being responsive.
I am not entirely sure how to adjust my code to make the text responsive with the images, but here is the code that I have for these respective elements.
.cssHotelBox {
position: relative;
}
.pickgradient{
position:relative;
display:inline-block;
}
.pickgradient:after {
content:'';
position:absolute;
top:0;
margin-top: 99px;
left: 1px;
width:221px; height:50%;
display:inline-block;
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.70) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.70)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.70) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.70) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.70) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.70) 100%); /* W3C */
}
.cssHotelImage {
height: 160px;
width: 223px;
border: solid 1px #FFF;
margin-top: 40px;
}
.cssHotelText {
color: #FFF;
font-size: 14px !Important;
position: absolute;
top: 160px;
left: 8px;
}
.cssHotelCity {
color: #FFF;
font-family: inherit;
font-size: 11px !Important;
position: absolute;
top:180px;
font-weight: 100 !Important;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
.starRating {
display:inline-block;
width:60px;
height:11px;
background:transparent url(../images/star-sprites.png) no-repeat scroll;
margin-left: 6px;
margin-right: 2px;
}
When I make .cssHotelBox have the text-align: center, this is how it shows up:
I would like the text to be responsive within the image after:
#media (max-width: 768px) {
}
Is there any way I can fix the issue with the text? Thanks.
You should wrap the image and the text within the same container
Related
I'm trying to create a responsive button from a photoshop mockup in HTML and CSS. Here is the button mockup:
I'm struggling with how to get the arrow in the white space and to stay there through different screen sizes.
I created the color separation through a gradient, like this:
HTML
<button> All Team Members </button>
CSS
button {
/* Permalink http://colorzilla.com/gradient-editor/#990033+0,990033+50,990033+86,ffffff+86,ffffff+100 */
width: 70%;
font-size: .6em;
font-size: 3.4vw;
padding: 2%;
color: #ffffff;
outline-color: #990033;
background: rgb(153,0,51); /* Old browsers */
background: -moz-linear-gradient(left, rgba(153,0,51,1) 0%, rgba(153,0,51,1) 50%, rgba(153,0,51,1) 86%, rgba(255,255,255,1) 86%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(153,0,51,1)), color-stop(50%,rgba(153,0,51,1)), color-stop(86%,rgba(153,0,51,1)), color-stop(86%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(153,0,51,1) 0%,rgba(153,0,51,1) 50%,rgba(153,0,51,1) 86%,rgba(255,255,255,1) 86%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(153,0,51,1) 0%,rgba(153,0,51,1) 50%,rgba(153,0,51,1) 86%,rgba(255,255,255,1) 86%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(153,0,51,1) 0%,rgba(153,0,51,1) 50%,rgba(153,0,51,1) 86%,rgba(255,255,255,1) 86%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(153,0,51,1) 0%,rgba(153,0,51,1) 50%,rgba(153,0,51,1) 86%,rgba(255,255,255,1) 86%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#990033', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
}
And it currently looks like this:
What is the best way to move forward? I wondered if I should just use screenshots of the button from the mockup, or if I should make it in CSS. How can I make the button look like this and be responsive?
Use pseudo elements :before and :after, to make the background and the arrow. Use Font Awesome etc if you need a different shape of arrow.
button {
font-size: 3vw;
padding: 2vw;
color: #ffffff;
background: #903;
border: 0;
position: relative;
padding-right: 8vw;
}
button:before {
content: '';
width: 6vw;
position: absolute;
right: 0;
top: 0;
bottom: 0;
background: white;
border: 1px solid #903;
}
button:after {
content: '❯';
position: absolute;
right: 2vw;
color: #903;
}
<button>All Team Members</button>
jsfiddle
try this:
.btn {padding:10px 40px 10px 20px;
width:70%;
border-radius:3px;
border:2px solid inherit;
border-color: #eeeeee;
background-color:rgb(153,0,51);
background-position:center right;
background-repeat:no-repeat;
text-align:center;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#990033', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */
font-size: .6em
}
.white_txt {color:#ffffff!important;}
.purple_btn {border:2px solid #eeeeee;border-radius:3px;}
<div class="purple_btn btn">
<div class="white_txt">All Team Members</div>
</div>
I have columns with gradients. Need create a gradient that will start from top right corner to bottom left corner, but corners of a gradient are clipped.
It looks ugly and and corners of gradients are not linked. I tried use background image but it is bad working on mobile devices.
<section class="slider">
<div class="container slider-menu">
<div class="col-lg-5ths col-md-5ths col-sm-5ths col-xs-4"><img src="http://rustypepper.me/production/img/icon-2.png" alt="Шарики" class="img-responsive">
<p>
Lorem <br> Ipsum
</p>
</div>
// ........ 14 same columns
</section>
.slider-menu div {
background: #006bac;
position: relative;
margin-bottom:5px;
height: 240px; }
.slider-menu div img {
position: relative;
z-index: 999; }
.slider-menu div:after {
content: "";
position: absolute;
top: 0;
left: 0;
opacity: 0.1;
width: 100%;
height: 100%;
z-index: 1;
background: black;
/* Old browsers */
background: -moz-linear-gradient(45deg, black 0%, white 51%, black 51%, white 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, black), color-stop(51%, white), color-stop(51%, black), color-stop(100%, white));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, black 0%, white 51%, black 51%, white 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, black 0%, white 51%, black 51%, white 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(45deg, black 0%, white 51%, black 51%, white 100%);
/* IE10+ */
background: linear-gradient(45deg, black 0%, white 51%, black 51%, white 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 );
/* IE6-9 fallback on horizontal gradient */ }
.slider-menu img {
display: block;
margin: 0 auto; }
.slider-menu p {
text-align: center;
color: #fff;
margin-top: 20px; }
http://codepen.io/lifetowin/pen/PqByRK/
An alternate solution is to set the angle with symbolics names
background: linear-gradient(to top right, black 0%, white 51%, black 51%, white 100%);
This way, the gradient will adapt itself to the container dimensions, instead of adapting the dimensions to the gradient angle
You have used 45 degree gradient so the height and the width of cells must be equal. Yours are not. So if you make the width and height are equal then it will be ok. And i changed the gradient stop %51 to %50
.slider-menu div {
background: #006bac;
position: relative;
margin-bottom:5px;
height: 228px; }
.slider-menu div img {
position: relative;
z-index: 999; }
.slider-menu div:after {
content: "";
position: absolute;
top: 0;
left: 0;
opacity: 0.1;
width: 100%;
height: 100%;
z-index: 1;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,ffffff+52,000000+52,ffffff+100,000000+100,ffffff+100 */
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,ffffff+51,000000+51,ffffff+100 */
background: black;
/* Old browsers */
background: -moz-linear-gradient(45deg, black 0%, white 50%, black 50%, white 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, black), color-stop(50%, white), color-stop(50%, black), color-stop(100%, white));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, black 0%, white 50%, black 50%, white 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(45deg, black 0%, white 50%, black 50%, white 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(45deg, black 0%, white 50%, black 50%, white 100%);
/* IE10+ */
background: linear-gradient(45deg, black 0%, white 50%, black 50%, white 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 );
/* IE6-9 fallback on horizontal gradient */ }
.slider-menu .row {
padding: 0px; }
.slider-menu img {
display: block;
margin: 0 auto; }
.slider-menu p {
text-align: center;
color: #fff;
margin-top: 20px; }
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px; }
.col-xs-5ths {
width: 20%;
float: left; }
#media (min-width: 768px) {
.col-sm-5ths {
width: 20%;
float: left; } }
#media (min-width: 992px) {
.col-md-5ths {
width: 20%;
float: left; } }
#media (min-width: 1200px) {
.col-lg-5ths {
width: 20%;
float: left; } }
#media (min-width: 320px) {
.container {
padding: 0px 15px; }
.site-header .container {
padding: 0px; }
.slider-menu div {
padding: 50px 0px 24px 0px; }
.slider-menu p {
font-size: 12px; }
body {
margin: 0 0 65px;
/* bottom = footer height */ }
.site-footer {
height: 65px;
padding: 0px 10px; }
.site-footer p.pull-left {
display: none; }
.site-footer p.pull-right {
float: left !important; }
.list-image > div {
margin-top: 15px; }
.container > .navbar-collapse {
margin-left: 0px;
margin-right: 0px; }
.navbar-nav > li > p > a {
color: #fff; }
.navbar-nav {
margin: 0px auto;
width: 100%; }
.navbar-nav li {
width: 100%; }
.navbar-nav .container {
margin-left: 0px;
margin-right: 0px; }
.site-header .container > .navbar-header {
margin-left: auto;
margin-right: auto; } }
http://codepen.io/anon/pen/eNjQmO
I have 3 divs
I am using float:left to have the divs in the same line. my problem is that the div1 will have a random width. Div 3 will be always 25 pixels with margin left and right of 1. and then the middle div needs to fill up the remaining space.
What would be the best way to accomplish this and still be supported in all browsers?
Here is what I tried, but the problem is that the % width wont work because div1 will always change in width.
<div class="title-div gradient">
<div class="title-div-left">
<p>Service 1</p>
</div>
<div class="background-line"></div>
<div class="title-div-right">
<img src="ArrowUp.png" alt="▲">
</div>
</div>
</div>
.services-wrapper .expansion-wrap .title-div {
height: 3.5rem;
line-height: 3.5rem;
width: 95.6rem;
font-size: 1.7rem;
color: #FFF;
margin-left: 3.4rem;
background: #6f1505;
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZmMTUwNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzNDA4MDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #6f1505 0%, #340801 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6f1505), color-stop(100%, #340801));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6f1505 0%, #340801 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6f1505 0%, #340801 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #6f1505 0%, #340801 100%);
/* IE10+ */
background: linear-gradient(to bottom, #6f1505 0%, #340801 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6f1505', endColorstr='#340801',GradientType=0 );
.services-wrapper .expansion-wrap .title-div .title-div-left {
float: left;
}
.services-wrapper .expansion-wrap .title-div .title-div-left p {
margin: 0;
padding-left: 1.7rem;
padding-right: 1rem;
font-size: 2rem;
font-weight: bold;
display: inline;
}
.services-wrapper .expansion-wrap .title-div .background-line {
background-image: url("../images/Line.png");
background-repeat: no-repeat;
background-position: center;
background-position: no-repeat;
width: 50%;
height: 100%;
float: left;
}
.services-wrapper .expansion-wrap .title-div .title-div-right {
float: left;
height: 3.5rem !important;
padding-left: 1rem;
}
.services-wrapper .expansion-wrap .title-div .title-div-right img {
margin-top: 0.5rem;
}
Adding overflow: auto will make the div fill up the remaining space.
Demo: http://jsfiddle.net/aaL8gvhg/
I have this JSFiddle: Click here
<div id="header-parent">
<div id=header>
<div id=header-title><img src="${pageContext.request.contextPath}/icon/pizza2.png"><span>this is a title</span></div>
<div id=header-cart><div id="cart-title">
<div><span>0</span></div>
<div><span>pizza cart</span></div>
</div>
<div id="cart-icon"><img src="${pageContext.request.contextPath}/icon/shopping-cart.PNG"></div>
</div>
</div>
</div>
If you go to that page youll see that the right div is actually align under the header itself.
How can I set the right div to be inside the header?
A float always float above the next element. So place the header-cart before the cart-title.
Updated JsFiddle
Obs: I didn't fix the fiddle, there's some serious adjustments you have to make. You didn't quoted the ids, among other things...
http://jsfiddle.net/usnmLuy5/3/
Use display:block-inline to keep the blocks from using 100% width. Use a float on the cart, and set the height of the header so that the cart will fit. spell check height, there is a heigth in the CSS which is being ignored and is not needed.
#header-parent {
padding-top:5px;
padding-bottom:5px;
border-bottom: 1px solid White;
background: #45484d; /* Old browsers */
background: -moz-linear-gradient(top, #45484d 43%, #000000 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(43%,#45484d), color-stop(100%,#000000)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #45484d 43%,#000000 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #45484d 43%,#000000 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #45484d 43%,#000000 100%); /* IE10+ */
background: linear-gradient(to bottom, #45484d 43%,#000000 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
}
#header {
position: relative;
margin-left: auto;
margin-right: auto;
cursor: pointer;
height: 36px; /* same as cart */
}
#header-child{
padding:5px 0 5px 0;
display:inline-block;
}
#header-title {
display:inline-block;
}
#header-title img{
width: 25px;
heigth: 25px;
margin-right:5px;
vertical-align: middle;
}
#header-cart{
display: inline-block;
text-align:center;
background-color:red;
float:right;
color:white;
font-size: 15px;
}
#header-cart img{
width: 30px;
heigth: 30px;
}
#header-cart #cart-icon{
float:left;
}
#header-cart #cart-title{
float:left;
}
#header-cart #header-title{
display: inline-block;
background-color:blue;
}
#header-title span{
color: white;
font-family: Georgia, Times, "Times New Roman", serif;
font-size:20px;
margin-top: 0;
margin-bottom: 0;
vertical-align: middle;
}
I have a menu where I want to have an active state and a hover state of the menu items. My problem is illustrated best in the two images. The green background color should only cover the dark orange area (Which is an image).
This is my menu now:
And this is how I want it to be:
Which way is best to cut the bottom of the green element to get this effect?
My code so far in JSFIDDLE:
http://jsfiddle.net/HC5qC/
CSS:
nav ul {
padding: 0;
list-style-type: none;
position: absolute;
right: 96px;
top: 37px;
}
nav li {
float: left;
}
nav a {
text-decoration: none;
font-weight: 400;
font-size: .9375em;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #fff;
padding: 54px 15px 65px 15px;
overflow: hidden;
}
.current-menu-item a,
.current-menu-item a:hover {
background: #79bd8f; /* Old browsers */
background: -moz-linear-gradient(top, #79bd8f 30%, #00a388 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,#79bd8f), color-stop(99%,#00a388)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #79bd8f 30%,#00a388 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #79bd8f 30%,#00a388 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #79bd8f 30%,#00a388 99%); /* IE10+ */
background: linear-gradient(to bottom, #79bd8f 30%,#00a388 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#79bd8f', endColorstr='#00a388',GradientType=0 ); /* IE6-9 */
}
nav a:hover {
background: #6b1600;
background: rgba(107, 22, 0, 0.2);
}
I wonder if something like this FIDDLE might get you started.
I'll play around with it a bit more, to see how close we might get to what you want.
But the concept is to put an :after or :before, or an absolutely positioned "overlay" and be able to click to boxes behind.
CSS
.selector {
width: 295px;
height: 100px;
overflow: hidden;
background-color: transparent;
position: relative;
}
.button1 {
float: left;
width: 32%;
height: 100%;
border: 1px solid white;
background-color: blue;
}
.selector:after {
content: '';
width: 300px;
height: 30px;
position: absolute;
top: 85px;
left: 0px;
transform: rotate(-3deg);
background-color: red;
}