I somehow managed to make the input box responsive but the button is not being aligned in center
here is the css code
.webdesigntuts-workshop button {
background: linear-gradient(#333, #222);
border: 1px solid #444;
border-radius: 5px 5px 5px 5px;
-webkit-box-shadow: 0 2px 0 #000;
box-shadow: 0 2px 0 #000;
color: #fff;
display: block;
font-family: "Cabin", helvetica, arial, sans-serif;
font-size: 13px;
font-weight: 400;
height: 40px;
margin: 20px;
padding: 0 10px;
padding-bottom: 2px;
text-shadow: 0 -1px 0 #000;
display: inline-block;
width:100%;
max-width:120px;
float:center;
}
Here is the whole Codepen link
https://codepen.io/anon/pen/XZrqzZ
Your code is messy, to much, in fact. Yet, the problem is not the button, but the input. The margins in the input is pushing it out of the screen because you have the width to 100%. So, the input take 100% of the screen plus the margin, pushing it out of the layout intended.
Try this in your css:
.webdesigntuts-workshop input{
margin: 0; /* Put 0 */
width: 100%;
}
.webdesigntuts-workshop button {
margin: 0 auto; /* Add this */
}
Related
I build a form using HTML CSS js jquery and GSAP. When I debug with chrome console. It's showing perfectly, but visiting from mobile is broken. I used media query but it's coming out broken so I removed it. How to make it responsive in mobile view also.
*{
margin: 0;
padding: 0;
body{
font-family: montserrat, arial, verdana;
background-color: #000000;
background-image: linear-gradient(315deg, #000000 0%, #414141 74%);
}
#msform {
width: 900px;
margin: 50px auto;
text-align: center;
position: relative;
}
#msform fieldset {
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
box-sizing: border-box;
width: 80%;
margin: 0 10%;
border:solid 2px white;
position: relative;
}
You can see my live form in github- https://tamzid958.github.io/multipage_form/
I am trying to create a card UI at: https://codepen.io/sarimabbas/pen/qjZYvr
.book_left {
width: 35%;
height: 300px;
float: left;
overflow-x: hidden;
background: transparent;
}
.book_left img {
width: auto;
height: 100%;
border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
position: relative;
}
.book_right {
width: 65%;
height: 300px;
float: left;
background: #000000;
border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
}
The problem I run into is that the left side of the card (which contains an image), can overflow onto the right. Instead of hiding this overflow, I would like to blend it into the div on the right, so that the text is not hidden and can be readable.
Would something like this be possible? I have tried to research combinations of floats, background image fades and divs but have been unsuccessful.
On a related note, what would be the steps needed to make such a card responsive?
I'm not sure I understand completely, but using the below code gives transparency allowing to see the text on top of the overflowed image. With a completely black background that's not an option.
.book_right {
width: 65%;
height: 300px;
float: left;
background: rgba(0,0,0, 0.5);
border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
position: relative;
}
With regard to responsiveness, I would go for a flexbox instead of floats and use percentages instead of pixels for width and height.
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
.book {
width: 450px;
height: 300px;
background: transparent;
position: static;
left: 0;
right: 0;
margin: auto;
top: 0;
bottom: 0;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 0 2px 1px 0 #777;
}
.book_left {
width: 35%;
height: 300px;
float: left;
overflow-x: visible;
background: transparent;
}
.book_left img {
width: auto;
height: 100%;
border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
position: relative;
}
.book_right {
width: 65%;
height: 300px;
float: left;
background: rgba(0,0,0, 0.5);
border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
position: relative;
}
.book_right h1 {
color: white;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
text-align: left;
font-size: 20px;
margin: 30px 0 0 0;
padding: 0 0 0 40px;
letter-spacing: 1px;
}
.book_right_details ul {
list-style-type: none;
padding: 0 0 0 40px;
margin: 10px 0 0 0;
}
.book_right_details ul li {
display: inline;
color: #e3e3e3;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 14px;
padding: 0 40px 0 0;
}
.book_right_blurb p {
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
padding: 0 40px 0 40px;
letter-spacing: 1px;
margin: 10px 0 10px 0;
line-height: 20px;
}
.book_right_blurb a {
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
padding: 0 0 0 40px;
color: #2ecc71;
margin: 0;
}
.book_right_button {
padding: 0 0 0 40px;
margin: 15px 0 0 0;
}
.book_right_button a {
color: #2ecc71;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
border: 2px solid #2ecc71;
padding: 5px 5px 5px 5px;
font-size: 12px;
border-radius: 5px;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .5s;
transition-duration: .5s;
}
.book_right_button a:hover {
color: #000000;
background-color: #2ecc71;
cursor: pointer;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .5s;
transition-duration: .5s;
}
<div class='book'>
<div class='book_left'>
<img src='http://images.gr-assets.com/books/1474171184l/136251.jpg'>
</div>
<div class='book_right'>
<h1>Harry Potter and the Deathly Hallows</h1>
<div class='book_right_details'>
<ul>
<li>JK Rowling</li>
<li>Fiction</li>
</ul>
<div class='book_right_blurb'>
<p>Harry meets his destiny in the final book of Rowling's acclaimed series.</p>
</div>
<div class='book_right_button'>
<a href='https://www.youtube.com/watch?v=ot6C1ZKyiME' target='_blank'>READ BOOK</a>
</div>
</div>
</div>
</div>
There's a few approaches to this problem but the simplest I can think of is something like applying a gradient background to the right hand box and setting .book's background to be black. So something like the following (will need some polishing of course)
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
.book {
width: 450px;
height: 300px;
margin: auto;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
box-shadow: 0 2px 1px 0 #777;
background: #000;
}
.book_left {
width: 35%;
height: 300px;
float: left;
}
.book_left img {
width: auto;
height: 100%;
border-radius: 10px 0 0 10px;
-webkit-border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
/* No need for relative or z-indexes if our layers are in order (later in markup = "higher" layer for position: static) */
}
.book_right {
width: 65%;
height: 300px;
float: left;
border-radius: 0 10px 10px 0;
-webkit-border-radius: 0 10px 10px 0;
-moz-border-radius: 0 10px 10px 0;
/* Gradient that sits on left of right panel - black background has also been applied to .book so that if the image doesn't fit the width we won't end up with weird chunks of missing background */
/* Generated gradient via: http://colorzilla.com/gradient-editor/ then tweaked a little */
background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 10px, rgba(0,0,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 10px,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 10px,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
}
.book_right h1 {
color: white;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
text-align: left;
font-size: 20px;
margin: 30px 0 0 0;
padding: 0 0 0 40px;
letter-spacing: 1px;
}
.book_right_details ul {
list-style-type: none;
padding: 0 0 0 40px;
margin: 10px 0 0 0;
}
.book_right_details ul li {
display: inline;
color: #e3e3e3;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 14px;
padding: 0 40px 0 0;
}
.book_right_blurb p {
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
padding: 0 40px 0 40px;
letter-spacing: 1px;
margin: 10px 0 10px 0;
line-height: 20px;
}
.book_right_blurb a {
text-decoration: none;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
padding: 0 0 0 40px;
color: #2ecc71;
margin: 0;
}
.book_right_button {
padding: 0 0 0 40px;
margin: 15px 0 0 0;
}
.book_right_button a {
color: #2ecc71;
text-decoration: none;
font-family: 'Montserrat', sans-serif;
border: 2px solid #2ecc71;
padding: 5px 5px 5px 5px;
font-size: 12px;
border-radius: 5px;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .5s;
transition-duration: .5s;
}
.book_right_button a:hover {
color: #000000;
background-color: #2ecc71;
cursor: pointer;
-webkit-transition-property: all;
transition-property: all;
-webkit-transition-duration: .5s;
transition-duration: .5s;
}
<div class='book'>
<div class='book_left'>
<img src='http://images.gr-assets.com/books/1474171184l/136251.jpg'>
</div>
<div class='book_right'>
<h1>Harry Potter and the Deathly Hallows</h1>
<div class='book_right_details'>
<ul>
<li>JK Rowling</li>
<li>Fiction</li>
</ul>
<div class='book_right_blurb'>
<p>Harry meets his destiny in the final book of Rowling's acclaimed series.</p>
</div>
<div class='book_right_button'>
<a href='https://www.youtube.com/watch?v=ot6C1ZKyiME' target='_blank'>READ BOOK</a>
</div>
</div>
</div>
</div>
Making it responsive you could set a % width on .book and probably float it.
The caveat to my approach is that if the image doesn't overflow it will have a hard edge so it may look strange next to ones that don't do overflow. You could attack this by also setting a percentage width on the images but you'd need to be cautious of images with largely different proportions and ensure that they always cover the 300px height. Alternatively you could set the images as a background image on .book_left and set background-size: cover
I'd usually suggest in this instance to crop images to consistent proportions to avoid the need for fading the overflow as it'll make your life a lot easier in the long run.
An alternate approach to the fade that might be more consistent would be to relatively position .book_left then place an absolutely positioned div within it with a gradient background which is layered on top of the image so something like a div with the following properties added within .book_left
position: absolute;
right: 0;
z-index: 1;
width: 10px;
background: -moz-linear-gradient .....
This combined with an image that fills the container should give you a more consistent look if you want the fade there
I need to get it so the div containing the date is at the top of the full_card div and expands to the full width of the card. Currently it is much lower and not expanding the full width.
p {
font-weight: bold;
font-family: Arial;
}
#container {
width: full;
}
.full_card {
float: left;
background-color: #d1ccff;
border-radius: 25px;
border: 5px solid #404266;
margin: 10px;
padding: 10px 30px 10px 30px;
width: 150px;
height: 250px;
}
#event {
font-size: 18px;
font-style: italic;
color: white;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}
#tag {
font-size: 18px;
text-align: center;
color: #000;
}
.date_back {
background-color: #404266;
border-radius: 25px 25px 0px 0px;
min-width: 150px;
height: 40px;
}
#date {
font-size: 26px;
text-align: center;
color: #fff;
}
<div id="container">
<div class="full_card">
<div class="date_back">
<p id="date">1981</p>
</div>
<p id="event">Voldemort murders Lily and James Potter</p>
<hr>
<p id="tag">Harry Potter</p>
</div>
</div>
Modified your code to show you how this is done.
The padding on the .full_card element affected everything inside of it, including the purple date "tab". I commented out this padding so the tab wouldn't be pushed down and inward.
By default, <p> elements have margin on the top and bottom. You need to override this if you don't want it - I added margin: 0; to stop the #date element from moving down.
Since we removed padding in step 1 (30px from both sides), I added 60px of width to the .full_card element to bring it to 210px wide, and then added 30px of padding to the sides inside the #event element.
To get the border-radius working properly on the purple element, I added overflow: hidden to .full_card (to "trim" anything inside to its shape), and removed the unneeded border-radius that was on the .date_back element.
Hope this helps!
p {
font-weight: bold;
font-family: Arial;
}
#container {
width: full;
}
.full_card {
float: left;
background-color: #d1ccff;
border-radius: 25px;
border: 5px solid #404266;
margin: 10px;
/*padding: 10px 30px; */
width: 210px; /* added 60px */
height: 250px;
overflow: hidden; /* added this for radius */
}
#event {
font-size: 18px;
font-style: italic;
color: white;
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
padding: 0 30px; /* added this */
}
#tag {
font-size: 18px;
text-align: center;
color: #000;
}
.date_back {
background-color: #404266;
/* border-radius: 25px 25px 0px 0px; */
min-width: 150px;
height: 40px;
}
#date {
font-size: 26px;
text-align: center;
color: #fff;
margin: 0; /* added this */
}
<div id="container">
<div class="full_card">
<div class="date_back">
<p id="date">1981</p>
</div>
<p id="event">Voldemort murders Lily and James Potter</p>
<hr>
<p id="tag">Harry Potter</p>
</div>
</div>
simple question, with a simple answer that I cannot seem to figure out.
I have 12 images in the form of 6 rows and 2 columns that I would like to be formatted to 12 rows with 1 column when my media query breaks to 240 px wide.
This has got to be an incredibly easy positioning solution I am totally missing after 12 hours of working server code, but I can't find the simple solution to fix it.
Here is my markup (the same for all 12 images):
<div class="view view-first">
<img src = "img/img1.jpg" alt="First Image">
<div class="mask">
<h2>Displayed 1st Image</h2>
<p>Image example</p>
Read More
</div>
</div>
and here is my markup for all images:
.view {
width: 300px;
height: 200px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff url(../img/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
width: 300px;
height: 200px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.view h2 {
text-transform: uppercase;
color: #fff;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
background: rgba(0, 0, 0, 0.8);
margin: 20px 0 0 0;
}
.view p {
font-family: Georgia, serif;
font-size: 16px;
position: relative;
color: #fff;
text-shadow:3px 3px 5px #000;
padding: 10px 20px 20px;
text-align: center;
}
.view a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
background: #000;
color: #fff;
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
}
.view a.info: hover {
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
}
I'd show the media query but right now it is just the call and the max-width stipulation lol.
Thanks for the kind help ;)
If you want to use media-queries you have to use percentages for the width. That way your image will "scale" as you resizes the browser. Two rows with 6 images means each image has a width of 50%. Do note that you have to take in account margins and paddings.
You can simply put in your media query from the size of xxxx give the images width 100%.
I have got tricky problem here. I'd like to vertical align my text inside a button
<button id="rock" onClick="choose(1)">Rock</button>
And here is my CSS
button {
font-size: 22px;
border: 2px solid #87231C;
border-radius: 100px;
width: 100px;
height: 100px;
color: #FF5A51;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
button:active {
font-size: 22px;
border: 2px solid red;
border-radius: 100px;
width: 100px;
height: 100px;
}
You can check it out here http://jsfiddle.net/kA8pp/ . I want to have the text on the bottom. Thank you very much!
EDIT: I can't explain it well so here is the picture of it :)
You can use line-height to achieve your goal.
button {
font-size: 22px;
border: 2px solid #87231C;
border-radius: 100px;
width: 100px;
height: 100px;
color: #FF5A51;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
line-height: 150px;
overflow: visible;
}
http://jsfiddle.net/kA8pp/2/
You can use flexbox (check browser support, depending on your needs).
button {
display: inline-flex;
align-items: flex-end;
}
Try padding-top:65px; in button class
button {
font-size: 22px;
border: 2px solid #87231C;
border-radius: 100px;
width: 100px;
height: 100px;
color: #FF5A51;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
padding-top:65px;
}
JS Fiddle Demo
Buttons Style Differently: A Variation on Styling
The <button> element behaves a bit differently from some other elements, say a <div>. If you set display: table-cell in a button, it does not affect the layout, so vertical-align will allow you to control the text position.
On the other hand, one could do the following:
<div class="button" id="rock" onClick="choose(1)">Rock</div>
and use the following CSS:
.button {
font-size: 22px;
border: 2px solid #87231C;
border-radius: 100px;
width: 100px;
height: 90px;
color: #FF5A51;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
display: table-cell;
vertical-align: bottom;
text-align: center;
padding-bottom: 10px;
}
In this case, you have some control by adjusting padding and height.
If you are binding a JavaScript action to the element, it does not really matter all that much what the tag is, div or button.
This approach may some advantages in particular situations.
If you apply the above CSS to a button tag, it will not work. Good to know.
http://jsfiddle.net/audetwebdesign/QSap8/
This should work for you!
<pre>
.button{
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
color: #444;
width: 32px;
padding: 2px;
margin-left: 5px;
background-color: #fdfdfd;
border: 1px solid #cdcdcd;
cursor: pointer;
}
</pre>