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 */
}
I have a loading Image (while page loading) which was surrounded by box like shadow as like this:
I want this Image to show as like this:
This is the code I tried to fix
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
background-color:transparent;
}
Can some one help to fix this?
For example you have .selector and .selector.noshadow class
.selector {
-webkit-box-shadow: 0 3px 5px #333;
-moz-box-shadow: 0 3px 5px #333;
box-shadow: 0 3px 5px #333;
}
.selector.noshadow {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
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'm applying a box-shadow to an element with left and right borders.
I want the box shadow to stop so it doesn't appear underneath those borders.
Is there any way to achieve this without too many crazy wrappers?
<div id="button">Box-shadow, stop before the red borders!</div>
Here's a JSFiddle: http://jsfiddle.net/AHUEY/
You could do this with a pseudo element absolutely positioned relative to your target, instead of a box shadow:
#button {
position: relative;
background: #ccc;
text-align: center;
width: 400px;
border-left: 10px solid red;
border-right: 10px solid red;
}
#button::before {
content: '';
position: absolute;
bottom: -5px;
left: 0;
right: 0;
height: 5px;
background: black;
}
demo
This is possible using the spread parameter of the box shadow.
Please see the working fiddle
http://jsfiddle.net/prashant_11235/dkR4H/
#button {
background: #ccc;
text-align: center;
width: 400px;
height: 25px;
border-left: 10px solid red;
border-right: 10px solid red;
box-shadow: 0px 15px 0px -10px black;
}
Replace border-right and border-left with box-shadow:
#button {
background: #ccc;
text-align: center;
width: 400px;
box-shadow: 10px 0 0 0 red, -10px 0 0 0 red, 0 5px 0 0 black;
}
http://jsfiddle.net/eEnpp/
I am trying to create a webpage like this (just the screenshot part). I tried to follow that tutorial, plus other on the internet but they don't seem to work. This is my css code:
/* CloudBase 2.0 overrides for Gantry Framework */
/* Basic styles */
body {color: #333;}
background:url(../images/St%20Pauls.jpg);
#rt-header, #rt-bottom {color: #333333;}
.rt-container {background: #fff;}
.rt-article a{text-decoration: underline;}
a:hover {color: #000; text-decoration: none;}
#rt-footer, #rt-copyright, #rt-copyright a {color: #333333;}
#rt-sidebar-a {background-color: transparent;}
#rt-sidebar-b {background-color: transparent;}
#rt-sidebar-c {background-color: transparent;}
#gantry-viewswitcher {margin: 0 auto 1em;position: relative;}
#rt-accessibility .button{
padding: 0px;
}
#rt-accessibility .button, .rt-joomla .icon {
background-image: url(../images/typography.png);
}
/* Layers structure */
#page-wraper{
width: 998px;
padding: 0px 37px;
margin: 20px auto 0px auto;
background: url(../images/background/shadow.png) 50% 0px no-repeat;
}
#in-page-wraper{
background: url(../images/background/bottom-shadow.png) center bottom no-repeat;
padding-bottom: 51px;
}
#in-page-wraper-2{
background: url(../images/background/content-background.png);
border: 1px solid #fff;
padding-top: 25px;
padding-bottom: 25px;
min-height: 500px;
}
.rt-container{
background: none;
}
#rt-mainbody{
background: #fff;
margin: 0px;
-moz-box-shadow: 2px 2px 9px rgba(0,0,0,0.1), -2px -2px 9px rgba(0,0,0,0.1);
-webkit-box-shadow: 2px 2px 9px rgba(0,0,0,0.1), -2px -2px 9px rgba(0,0,0,0.1);
box-shadow: 2px 2px 9px rgba(0,0,0,0.1), -2px -2px 9px rgba(0,0,0,0.1);
padding: 6px;
overflow: hidden;
}
#rt-mainbody .component-content{
border: 1px solid #dcdcdc;
padding: 15px;
overflow: hidden;
}
The
background:url(../images/St%20Pauls.jpg);
part doesn't seem to work for some reason. Apologies if this is a basic question.
Thanks!!
The background attribute doesn't seem to be contained by any CSS element. You need to insert it into the appropriate CSS selector element in order for it to be displayed. At the moment the link is just hanging out, not being applied to any part of the document.
First of all, you should check path to image. Open a browser and enter url as:
http://your_domain/../images/St Pauls.jpg
if all right you must see the image.
Secondly, you should use quotes for set path to images. It means that you must replace to
background: url('../images/St Pauls.jpg');
Third, better use name of file that not includes the spaces.
Finally, your CSS is not valid. It must be fixed
/* CloudBase 2.0 overrides for Gantry Framework */
/* Basic styles */
body {
color: #333;
background: url('../images/StPauls.jpg');
position: fixed;
}
#rt-header,
#rt-bottom {color: #333333;}
.rt-container {background: #fff;}
.rt-article a {text-decoration: underline;}
a:hover {color: #000; text-decoration: none;}
#rt-footer,
#rt-copyright,
#rt-copyright a {color: #333333;}
#rt-sidebar-a {background-color: transparent;}
#rt-sidebar-b {background-color: transparent;}
#rt-sidebar-c {background-color: transparent;}
#gantry-viewswitcher {margin: 0 auto 1em;position: relative;}
#rt-accessibility .button{ padding: 0px; }
#rt-accessibility .button,
.rt-joomla .icon {
background-image: url('../images/typography.png');
}
/* Layers structure */
#page-wraper{
width: 998px;
padding: 0px 37px;
margin: 20px auto 0px auto;
background: url('../images/background/shadow.png') 50% 0px no-repeat;
}
#in-page-wraper{
background: url('../images/background/bottom-shadow.png') center bottom no-repeat;
padding-bottom: 51px;
}
#in-page-wraper-2{
background: url('../images/background/content-background.png');
border: 1px solid #fff;
padding-top: 25px;
padding-bottom: 25px;
min-height: 500px;
}
.rt-container{
background: none;
}
#rt-mainbody{
background: #fff;
margin: 0px;
-moz-box-shadow: 2px 2px 9px rgba(0,0,0,0.1), -2px -2px 9px rgba(0,0,0,0.1);
-webkit-box-shadow: 2px 2px 9px rgba(0,0,0,0.1), -2px -2px 9px rgba(0,0,0,0.1);
box-shadow: 2px 2px 9px rgba(0,0,0,0.1), -2px -2px 9px rgba(0,0,0,0.1);
padding: 6px;
overflow: hidden;
}
#rt-mainbody .component-content{
border: 1px solid #dcdcdc;
padding: 15px;
overflow: hidden;
}
If you still not see image you can try use as background: url('/images/StPauls.jpg'); or background: url('images/StPauls.jpg');
You will need to make sure your background declaration is being applied to the body element:
body {
color: #333;
background:url(../images/St%20Pauls.jpg);
}
you will also need to check that the image you specified is correctly located in the images directory