I'm having an issue trying to get the green buttons underneath the header to lay properly across devices. Full desktop is fine, but as the screen gets smaller, the buttons will break between words and go the next line. And on mobile, I'd like them to stack, but they overlap, and I'm trying to add a bottom/top margin, but nothing helps.
http://www.cooldownjuice.com/collections/menu
How can I get this to lay properly?
Here's my code. (added max/min width as suggested on another topic here)
.catbtn {
padding: 10px;
margin-right: 4px;
margin-left: 7px;
background-color: #319E15;
color: #fff!important;
text-decoration: none!important;
font-family: Lato;
font-size: 100%;
text-transform: uppercase;
border-radius: 5px;
border: 2px solid #319E15;
width: 100%;
min-width: 50px;
max-width: 300px;
}
You'll need to use float, like so
.catbn {
display: block;
float: left;
margin-top: 10px;
}
Also I personally believe the behavior is better when you remove width: 100% but that's a matter of personal preference.
Use
display: -webkit-inline-box;
display: inline-block;
margin: 10px,
And voilà! And you can maintain your center buttons. If you wish, you can float:left/right to align
To avoid breaking of words and overlapping buttons, add following rules in your css
.catbn{
white-space:nowrap;
display:inline-block;
/*Rest of the css*/
}
The best way to do that is to set the a to block. You may use float or display:inline-block
Here is your modified code for button.
.catbtn {
padding: 10px;
margin-right: 4px;
margin-left: 7px;
background-color: #319E15;
color: #fff!important;
text-decoration: none!important;
font-family: Lato;
font-size: 100%;
text-transform: uppercase;
border-radius: 5px;
border: 2px solid #319E15;
width: 100%;
min-width: 50px;
display: inline-block;/* a as block and inline*/
max-width: 174px; /* Set the width*/
}
Hope this help you.!
Related
how can i prevent overflowing button? i do not know how to solve it...
i tried everything...
or maybe im just stupid or i just dont know a specific solution to fix this
.tips input {
padding: .5em;
background: var(--verydarkcyan);
border: none;
color: white;
border-radius: 7px;
width: 100%;
font-size: .7em;
font-weight: 700;
color: var(--darkgrayfishcyan);
background: var(--lightgrayfishcyan);
text-align: center;
}
.tips {
display: grid;
grid-template-columns: 33.33% 33.33% 33.33%;
gap: .35em
}
.tips button {
position: relative;
padding: .5em;
background: var(--verydarkcyan);
border: none;
color: white;
border-radius: 7px;
width: 100px;
font-size: .7em;
font-weight: 700;
}
It is overflowing because of your padding: .5em. The text is bigger than the available space you give it.
There are multiple ways to fix that, here you have two:
1. Hide overflow
You can add overflow: hidden to your buttons, now to button won't grow with the text.
2. Give text more space by changing the padding
You can change padding: .5em to padding-block: .5em. With that you are setting the padings only on top and bottom of the button, not left and right.
Add a width property to .tips class with a fix value or you can use max-width in .tips button property with a 100% width to make all buttons of same width
I am currently a student learning HTML and CSS to become a web developer and i am having some trouble with getting my navigation buttons to properly display as the page window is resized. I want them to stack on top of one another like blocks but instead they overlap as you can see. Webpage Example
I'm sure i'm missing something obvious, but i would greatly appreciate the help.
Thanks!
body {font-family: verdana, arial, sans-serif;
background-color: #523925; }
header { text-align: center;
padding-top: 50px;
background-image: url(coffeemug.jpg);
height: 120px;
font-size: 400%;
font-family: verdana pro black;
font-weight: bold; }
nav { text-align: center;
margin-top: 20px;
max-height: 150px; }
nav a { text-align: center;
padding: 10px 70px;
border-style: solid; border-width: 4px; border-color: #16181D;
margin-left: 5px;
color:#523925;
font-size: 120%; }
footer { text-align: center;
margin-top: 20px;
font-size: small; }
#wrapper { width: 95%;
margin-left: auto;
margin-right: auto;
background-color: #EAB987; }
.charpic {max-width: 100%; }
#media only screen and (max-width: 1024px) {
nav a { font-size: 100%;
padding: 8px 50px; }
}
By default, a tags have display: inline, which lets them display side by side and fit as ends up not respecting margins very well. As noted in a previous answer, changing them to display: block will get them to respect margins, but prevent them from sitting side by side unless you add additional logic.
Probably the simplest change to get the behavior that I think you're looking for is to make them display: inline-block, which will continue to lay them out side by side but treat them as block elements that won't overlap as they end up wrapping. This would look like:
nav a {
text-align: center;
padding: 10px 70px;
border-style: solid; border-width: 4px; border-color: #16181D;
margin-left: 5px;
color:#523925;
display: inline-block;
font-size: 120%;
}
You could also do this by using flexbox, making nav a flex parent with display: flex and then using flex properties to determine layout. This would be a bit more of a change, but I think probably get you a nicer solution. As an example, if you wanted to have them overflow when necessary and be centered each line, you could do:
nav {
display: flex;
justify-content: center;
}
try adding display: block; to the a element, like so:
nav a { text-align: center;
padding: 10px 70px;
border-style: solid; border-width: 4px; border-color: #16181D;
margin-left: 5px;
color:#523925;
display: block;
font-size: 120%; }
Regarding https://jsfiddle.net/postiffm/74cxr092/
> <div id="Tagline">
> I'm in the center.
> <div id="TaglineLeft"></div>
> <div id="TaglineRight">I am a phone #</div> </div>
How can I align the text in the TaglineRight so it has some space above it like the text in the center section? I've tried some padding and margin stuff, but nothing seems to work.
Thanks.
add line-height:30px; to #TaglineRight a
#TaglineLeft, #TaglineRight {
position: absolute;
color: white;
font-weight: normal;
text-align: center;
height: 100%;
width: 30%;
top: 0;
border-radius: 7px;
height: 20px;
padding: 5px;
}
you may add height: 20px; and padding: 5px; to #TaglineLeft, #TaglineRight { class
an old fashion way is to treat the child element as an table data by set it to display: table-cell, vertical-align: middle; & set it's parent to display: table;.
in that way you can change the height of the parent to whatever/whenever you like to and the child element will always stay vertical aligned. not like CSS3 solutions, it will work in old browsers too and cross browser support of course.
https://jsfiddle.net/ryf0w7rp/ - try to change the "#Tagline" element's height from 20px to other value and see the result.
*if you don't want main wrapper elements to use display: table so you can create another level of element to use display: table.
*for the example i made the solution just for the "#TaglineRight" element which has an inner <a> element. to make the other elements work the same, add the same structure and set the CSS to the right elements.
Instead of playing around with position:absolute/relative.
Consider using display:flex
check this solution
#Tagline {
color: white;
font-weight: normal;
letter-spacing: 2px;
text-align: center;
margin-bottom: 10px;
border: 0 solid #ff9706;
border-radius: 7px;
background-color: #ff9706;
display: flex;
height:30px;
line-height: 30px;
justify-content: space-between;
}
#TaglineLeft,
#TaglineRight {
color: white;
height: 100%;
width: 30%;
border-radius: 7px;
text-align: center;
}
#TaglineLeft {
margin-top: 0px;
background-color: #6673aa;
order: -1;
}
#TaglineRight {
border: 0 solid #7e922e;
background-color: #7e922e;
}
#TaglineRight a {
color: white;
letter-spacing: 1px;
text-decoration: none;
}
<div id="Tagline">
I'm in the center.
<div id="TaglineLeft">left line</div>
<div id="TaglineRight">I am a phone #
</div>
</div>
Hope it helps
My links for some reason are on top of each other since I changed all metrics from pixels to %. Here is my code. I am pretty sure it is a simple fix, but I just can't find an answer. Here is the code:
.left_column {
line-height: 3%;
float: left;
padding: 5%;
width: 10%;
height: 70%;
border: solid;
position: relative;
top: -11%;
border: solid;
}
#nav_left_column li {
display: block;
font-family: Arial;
}
#nav_left_column a {
text-decoration: none;
color: #3e3e3e;
background-color: #ffffff;
}
#nav_left_column a:hover {
background-color: #3e5869;
color: #ffffff;
}
#nav_left_column a:visited {
color: #357c49;
background-color: #ffffff;
}
<div class="left_column">
<ul id="nav_left_column">
<li>What's New
</li>
<li>Digital News
</li>
</ul>
</div>
This must be the culprit:
line-height: 3%;
Because it makes the line height of the links equal to 3% of the font size instead of 3% of the height. Simply get rid of it (or just don't set it to % because you don't need to use % everywhere) and it will be fine.
** UPDATE **
Since the line-height property was there to increase the space between the lines and it didn't work, you can use this:
#nav_left_column li {
display: block;
font-family: Arial;
margin-top: 10px; /* take care of the links' claustrophobia~ */
}
Or, if you want the empty space between them to be taken by the links (in other words, the links to be "fat"):
#nav_left_column li {
display: block;
font-family: Arial;
margin-top: 10px; /* take care of the links' claustrophobia~ */
}
#nav_left_column a {
text-decoration: none;
color: #3e3e3e;
background-color: #ffffff;
padding-top: 5px;
padding-bottom: 5px;
}
Your issue is setting the line-height to 3%. I have no idea why you would do that, but that is stacking the links, increase the value, or just remove the rule (my recommendation), and your problem should fix.
See the alternate to line height in this answer. (Or don't use percents.)
The effect you are seeing is most likely a combination of the line-height and width properties. Which are effectively constraining the printable area of your container (the div) to 3% of the height of its parent container and 10% of the parents width.
.left_column {
--> line-height: 3%;
float: left;
padding: 5%;
--> width: 10%;
height: 70%;
border: solid;
position: relative;
top: -11%;
border: solid;
}
You can observe the effect by removing or altering those two properties.
I got these share buttons from simplesharebuttons.com. I added a more button that will eventually be used to unhide less popular social media icons on smaller screens, but it's not lining up with the rest of the buttons and I can't figure out what the problem is.
http://jsfiddle.net/WLSqw/41/
#share-buttons img {
width: 35px;
padding-right: 5px;
display: inline;
}
#more {
width: 35px;
margin-right: 5px;
background: #ccc;
display: inline-block;
border-radius: 50%;
color: white;
font-size: 1em;
text-align: center;
line-height: 35px;
}
Actually, being an inline-block element, all you need for your #more is:
vertical-align: top;
DEMO
Add float:left; to the links and that button
JSFiddle