I have tried to add margin to my buttons but it makes the last button jump down a row. I think I know what is happening here but I'm not positive on how I should fix it. Here is what I have, what should I do?
.button {
width: calc(100% / 3);
height: max-content;
background: white;
-webkit-box-shadow: 0 8px 6px 10px black;
-moz-box-shadow: 0 8px 6px 10px black;
box-shadow: 0 8px 6px -1px grey;
margin: auto;
margin-top: 10px;
float: left;
margin: 0px;
font-family: sans-serif;
font-weight: 100;
text-align: center;
padding-top: 10px;
}
Page1
Page2
Page3
You can use a .button + .button rule to add a left margin when one button follows another. Like this, for example:
.button {
width: calc(80% / 3);
height: max-content;
background: white;
-webkit-box-shadow: 0 8px 6px 10px black;
-moz-box-shadow: 0 8px 6px 10px black;
box-shadow: 0 8px 6px -1px grey;
margin: auto;
margin-top: 10px;
float: left;
margin: 0px;
font-family: sans-serif;
font-weight: 100;
text-align: center;
padding-top: 10px;
}
.button + .button {
margin-left: calc(10%);
}
Page1
Page2
Page3
Here, the three buttons are allocated 80% of the parent containter's width, and the remaining 20% is shared equally between the second and third buttons.
a {
margin:12px;
}
Page1
Page2
Page3
Related
I am attempting to create the following design in Ionic:
Currently, I am specifically trying to push the top half of an image past the top of the card and have the image be about 80% of the width of the card.
How can I push the top half of the image outside of the card?
I have created a StackBlitz for this issue.
Edit: I have been able to make the image protrude the top half of the card but the image is overlapping text and other images. How can I push the card down where the top half contains the bottom half of the image and the bottom half contains the additional text, images, etc.?
Here is my CSS:
.card {
margin-left: 30px;
margin-right: 30px;
width: auto;
border-radius: 8px;
position: relative;
display: block;
margin-top: 100px;
overflow: visible;
div {
position: absolute;
top: -95px;
width: 100%;
text-align: center;
}
img:not(.castImg) {
width: 80%;
border-radius: 8px;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
display: block;
margin: -100px auto 0;
}
}
looking at the code here Made 2 changes in the home.scss file... play around with 17% which is an arbitrary number on both places
.card {
margin-left: 30px;
margin-right: 30px;
width: auto;
border-radius: 8px;
margin-top: 17%; /* Change 1a */
overflow: visible; /* Change 1b */
img:not(.castImg) {
width: 80%;
margin: auto;
margin-top: -17%; /* Change 2 */
border-radius: 8px;
-webkit-box-shadow: 0 8px 6px -6px black;
-moz-box-shadow: 0 8px 6px -6px black;
box-shadow: 0 8px 6px -6px black;
}
ion-card-title {
font-weight: bold;
text-align: center;
}
}
After using a unicode for a button, I've noticed that the unicode character is not properly aligned to the center (both horizontally & vertically) of the button. I'm not sure why this is happening when I used padding: 0;
.btn{
background-color: #868f98;
width: 60px;
height: 60px;
border-radius: 20%;
border: none;
outline: none;
color: #FFF;
padding: 0;
font-size: 2em;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
<button class="btn">☰</button>
Setting line-height to 60px on your .btn rule will center the character.
.btn{
background-color: #868f98;
width: 60px;
height: 60px;
line-height: 60px;
border-radius: 20%;
border: none;
outline: none;
color: #FFF;
padding: 0;
font-size: 2em;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
<button class="btn">☰</button>
apparently that symbol character is not in the vertical center of its line. (It is horizontally centered, though) So you just have to try around with a padding-bottom until you find the right value:
.btn{
box-sizing: border-box;
vertical-align: middle;
background-color: #868f98;
width: 60px;
height: 60px;
border-radius: 20%;
border: none;
outline: none;
color: #FFF;
padding: 0 0 0.24em 0;
font-size: 2em;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
<button class="btn">☰</button>
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%.
Please take a look at my site http://kaniamea.com/2/ I am trying to get the contentarea appear correctly behind the three Attractions boxes. My css is:
#attractions {
width: 290px;
height: auto;
display: block;
padding-right: 20px;
float: left;
}
and this is the code of my main container:
#main {
margin: 10px auto 0px;
width: 950px;
max-width:100%;
background: none repeat scroll 0% 0% #FBFBFB;
padding: 10px;
background-color: #FFF;
border: 2px solid #FFF;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
-webkit-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.75);
}
When I remove float: left; from #attractions and replace it it with display: inline-block; it works but I need to figure out another solution with float: left; so this will float correctly on mobile. Is there another way to make the contentarea styles appear behind the boxes?
I would like my ".tag" div to only be as wide as the text inside it. But, for some reason the paragraph element spans the whole width of the parent element. How can I stop this from happening? So that the ".tag" divs are only as wide as the text inside them?
JSFIDDLE: http://jsfiddle.net/X77e7/
My HTML:
<div class="tag">
<p> Hiking </p>
</div>
My CSS:
.tag {
margin: 0px 10px 0px 0px;
padding: 5px 5px 5px 5px;
height: auto;
width: auto;
border: 1px solid #ddd;
border-radius: 4px 4px 4px 4px;
background-color: #f4f4f4;
}
.tag p {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12px;
color: #444;
}
Add display:inline-block
It is stretching now because div is by default block element which occupies the whole space.
.tag {
margin: 0px 10px 0px 0px;
padding: 5px 5px 5px 5px;
height: auto;
width: auto;
border: 1px solid #ddd;
border-radius: 4px 4px 4px 4px;
background-color: #f4f4f4; display:inline-block
}
DEMO
Both div and p are block elements.
So you should consider setting the display at inline.
.tag {
display: inline;
margin: 0px 10px 0px 0px;
padding: 5px 5px 5px 5px;
height: auto;
width: auto;
border: 1px solid #ddd;
border-radius: 4px 4px 4px 4px;
background-color: #f4f4f4;
}
.tag p {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12px;
color: #444;
}
http://jsfiddle.net/X77e7/2/
just float your .tag and your problem is solved
.tag {
float:left;
margin: 0px 10px 0px 0px;
padding: 5px 5px 5px 5px;
height: auto;
width: auto;
border: 1px solid #ddd;
border-radius: 4px 4px 4px 4px;
background-color: #f4f4f4;
}
demo