I dont want blur on button but hover make button blured. I make some z-index positions like 1-2 but doesnt work.
You can see error in snippet I just want blur main-card but doesnt work blur.
How can I fix button blur?
I just try z-index and child on css but i cant make.
I am newbie on CSS Thanks for help.
For editing:
JS Fiddle
CODE:
.main-card{
width: 326px;
height: 360px;
background-color: white;
border-radius: 15px;
display: inline-grid;
margin: 60px;
padding-bottom: 21px;
z-index: 1;
}
.main-card:hover{
webkit-filter: blur(1px); /* Chrome, Safari, Opera */
filter: blur(1px);
}
.rafflelink{
filter: blur(0px);
z-index: 2;
}
.main-card > .rafflelink{
opacity: 0;
height: 50px;
position: absolute;
width: 200px;
align-self: center;
justify-self: center;
z-index: 2;
}
.main-card:hover > .rafflelink{
opacity: 1;
filter: none;
}
.header-card{
font-family: 'Poppins', sans-serif;
text-align: center;
height: 20px;
background-color: white;
border-top-left-radius:15px ;
border-top-right-radius:15px ;
}
.img-bg-card{
background-color:#0779e4;
text-align: center;
}
.img{
height: 157px;
padding-top: 5px;
width: 95%;
}
.progress-bar{
height: 16px;
background-color: grey;
border:solid 2px #0779e4;
}
.price-bar{
text-align: center;
justify-content: space-between;
display: -webkit-flex;
border-bottom: solid 2px cornflowerblue;
margin-left: 40px;
margin-right: 40px;
margin-top: 15px;
padding-right: 5px;
padding-left: 5px;
}
.ticket-bar{
text-align: center;
justify-content: space-between;
display: -webkit-flex;
border-bottom: solid 2px cornflowerblue;
margin-left: 40px;
margin-right: 40px;
margin-top: 15px;
padding-right: 5px;
padding-left: 5px;
}
.date-bar{
text-align: center;
justify-content: space-between;
display: -webkit-flex;
border-bottom: solid 2px cornflowerblue;
margin-left: 40px;
margin-right: 40px;
margin-top: 15px;
padding-right: 5px;
padding-left: 5px;
}
.price-left,.ticket-left,.date-left{
font-family: 'Poppins', sans-serif;
}
.price-right,.ticket-right,.date-right{
font-family: 'Poppins', sans-serif;
}
body {
width: 100%;
height: 100%;
background-color: #0695ff;
}
<body>
<div class="main" style="text-align: -webkit-center; padding-bottom: 60px;">
<div class="main-card">
<button class="rafflelink" href="/urun/Random Random Random">Random Click</button>
<div class="header-card">Random Random Random</div>
<div class="img-bg-card">
<img class="img" src="">
</div>
<div class="progress-bar"></div>
<div class="price-bar">
<div class="price-left">Random Price:</div>
<div class="price-right">1</div>
</div>
<div class="ticket-bar">
<div class="ticket-left">Random Ticket:</div>
<div class="ticket-right">10000</div>
</div>
<div class="date-bar">
<div class="date-left">Random Date:</div>
<div class="date-right">05/06/2021</div>
</div>
</div>
</div>
</body>
First add position: relative to .main-card so that position: absolute buttons work correctly.
Change selector .main-card:hover to selector .main-card:hover > *. This is necessary in order to blur the children, but not the .main-card in general. Like this:
.main-card:hover > * {
webkit-filter: blur(1px); /* Chrome, Safari, Opera */
filter: blur(1px);
}
And remove .rafflelink {} from css - this selector makes no sense.
.main-card {
width: 326px;
height: 360px;
background-color: white;
border-radius: 15px;
display: inline-grid;
margin: 60px;
padding-bottom: 21px;
z-index: 1;
position: relative;
}
.main-card:hover > * {
webkit-filter: blur(1px); /* Chrome, Safari, Opera */
filter: blur(1px);
}
/*.rafflelink {
filter: blur(0px);
z-index: 2;
}*/
.main-card > .rafflelink {
opacity: 0;
height: 50px;
position: absolute;
width: 200px;
align-self: center;
justify-self: center;
z-index: 2;
}
.main-card:hover > .rafflelink {
opacity: 1;
filter: none;
}
.header-card {
font-family: "Poppins", sans-serif;
text-align: center;
height: 20px;
background-color: white;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.img-bg-card {
background-color: #0779e4;
text-align: center;
}
.img {
height: 157px;
padding-top: 5px;
width: 95%;
}
.progress-bar {
height: 16px;
background-color: grey;
border: solid 2px #0779e4;
}
.price-bar {
text-align: center;
justify-content: space-between;
display: -webkit-flex;
border-bottom: solid 2px cornflowerblue;
margin-left: 40px;
margin-right: 40px;
margin-top: 15px;
padding-right: 5px;
padding-left: 5px;
}
.ticket-bar {
text-align: center;
justify-content: space-between;
display: -webkit-flex;
border-bottom: solid 2px cornflowerblue;
margin-left: 40px;
margin-right: 40px;
margin-top: 15px;
padding-right: 5px;
padding-left: 5px;
}
.date-bar {
text-align: center;
justify-content: space-between;
display: -webkit-flex;
border-bottom: solid 2px cornflowerblue;
margin-left: 40px;
margin-right: 40px;
margin-top: 15px;
padding-right: 5px;
padding-left: 5px;
}
.price-left,
.ticket-left,
.date-left {
font-family: "Poppins", sans-serif;
}
.price-right,
.ticket-right,
.date-right {
font-family: "Poppins", sans-serif;
}
body {
width: 100%;
height: 100%;
background-color: #0695ff;
}
<body>
<div class="main" style="text-align: -webkit-center; padding-bottom: 60px;">
<div class="main-card">
<button class="rafflelink" href="/urun/Random Random Random">Random Click</button>
<div class="header-card">Random Random Random</div>
<div class="img-bg-card">
<img class="img" src="">
</div>
<div class="progress-bar"></div>
<div class="price-bar">
<div class="price-left">Random Price:</div>
<div class="price-right">1</div>
</div>
<div class="ticket-bar">
<div class="ticket-left">Random Ticket:</div>
<div class="ticket-right">10000</div>
</div>
<div class="date-bar">
<div class="date-left">Random Date:</div>
<div class="date-right">05/06/2021</div>
</div>
</div>
</div>
</body>
Related
I am just practicing CSS/HTML and am trying to make a google clone. Everything else seems fine but now I am trying to make a footer and whenever I put a div inside the footer, they appear on top of the footer instead of inside the footer.
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#300;400;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
background-color: rgb(32, 33, 36);
color: white;
}
a {
text-decoration: none;
color: inherit;
}
.nav-bar a:nth-child(1):hover {
text-decoration: underline;
}
.nav-bar a:nth-child(2):hover {
text-decoration: underline;
}
.nav-bar {
height: 50px;
display: flex;
align-items: center;
justify-content: flex-end;
}
.nav-items {
list-style: none;
display: flex;
justify-content: flex-end;
align-items: center;
}
.nav-items li {
margin-left: 15px;
}
.menu-icon {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
width: 40px;
height: 40px;
padding: 10px;
border-radius: 50%;
}
.menu-icon:hover {
background-color: rgba(138, 133, 133, 0.26);
}
.menu-icon span {
background-color: #ffffff;
width: 20px;
height: 2px;
}
.profile-picture {
margin-right: 15px;
height: 32px;
width: 32px;
border-radius: 50%;
}
.profile-picture:hover {
box-shadow: 0px 0px 0px 5px #7068683b;
}
.profile-picture img {
border-radius: 50%;
width: 100%;
}
.main-section {
display: flex;
justify-content: center;
align-items: center;
margin-top: 80px;
}
.google-logo {
width: 375px;
height: 150px;
}
.google-logo img {
width: 100%;
}
.search-section {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.search-container {
display: flex;
justify-content: center;
align-items: center;
width: 580px;
border: solid;
border-color: #949090;
border-width: 1px;
border-radius: 300px;
padding: 9px;
height: 45px;
}
.search-container:hover {
box-shadow: 0px 0px 10px 2px #00000036;
}
.search-icon {
width: 25px;
height: 25px;
margin-right: 5px;
}
.search-icon img {
width: 100%;
}
.search-bar {
width: 550px;
height: 30px;
border: none;
outline: none;
}
.microphone {
width: 25px;
height: 25px;
}
.microphone img {
width: 100%;
}
.search-buttons {
margin-top: 25px;
}
.search-buttons button {
margin-left: 6px;
padding: 10px 16px 10px 16px;
background-color: #303134;
border: none;
border-radius: 4px;
color: #e8eaed;
font-size: 14px;
cursor: pointer;
border: solid 1px transparent;
}
.search-buttons button:hover {
border-color: #e8eaed;
}
.language-selector {
display: flex;
justify-content: center;
margin-top: 30px;
}
.language-selector p {
font-size: 13px;
color: #bdc1c6;
}
.language-selector a {
color: #8ab4f8;
}
.footer {
background-color: #446adb;
height: 100px;
margin-top: 92px;
}
<body>
<!-- start of the navigation bar-->
<nav class="nav-bar">
<ul class="nav-items">
<li>Gmail</li>
<li>სურათები</li>
<li>
<a href="#">
<div class="menu-icon">
<span>
</span>
<span>
</span>
<span>
</span>
</div>
</a>
</li>
<li>
<a href="#"><div class="profile-picture">
<img src="icons/unnamed.png">
</div></a>
</li>
</ul>
</nav>
<!-- end of the navigation bar -->
<!-- start of the main section (logo and search-bar)-->
<div class="main-section">
<a href="#"><div class="google-logo">
<img src="icons/google.png">
</div></a>
</div>
<div class="search-section">
<div class="search-container">
<div class="search-icon"><img src="icons/search.png"/></div>
<input type="text" class="search-bar">
<div class="microphone"><img src="icons/micro.png" alt=""></div>
</div>
<div class="search-buttons">
<button>
Google ძებნა
</button>
<button>
იღბალს მივენდობი
</button>
</div>
</div>
<div class="language-selector">
<p>Google ხელმისაწვდომია შემდეგ ენაზე: English</p>
</div>
<!-- end of the main section -->
<!-- start of the footer-->
<footer class="footer">
<div class="current-location">
this text should be inside the footer
</div>
</footer>
</body>
here is the picture of the problem I am having.
https://i.stack.imgur.com/AXMv6.png
It is inside the footer. Just this property:
background-color: rgb(32, 33, 36);
which you set for * gets inherited, and the bg color makes you think text it outside the footer. Comment it out for a while and you will see.
I use menu that was created by other developer in our company. I add to the first item of the menu dropdown selection, but the problem that the dropdown box not fully fill the all the item and I can't make it fill.
Here is HTML:
<div class="main-container-top-menu scroll1" id="main-container-top-menu">
<div class="top-menu-item-container-empty">
<div style="width: 50px"></div>
</div>
<div class="top-menu-item-container">
<div class="inactive-border-bottom">
<p class="control has-icons-left is-expanded">
<span class="select is-fullwidth ">
<select class="full-height">
<option>dropdown</option>
<option>options 1</option>
</select>
</span>
<span class="icon is-small is-left"><i class="far fa-building"></i></span>
</p>
</div>
</div>
<div class="top-menu-item-container" >
<div>
<div class="top-menu-item">2. Lot and Model</div>
</div>
</div>
<div class="top-menu-item-container" >
<div [className]="ishpExpanded?'active-border-bottom':'inactive-border-bottom'">
<div class="top-menu-item">3. Home Plan</div>
</div>
</div>
<div class="top-menu-item-container">
<div [className]="isupgExpanded?'active-border-bottom':'inactive-border-bottom'">
<div class="top-menu-item">4. Upgrades</div>
</div>
</div>
<div class="top-menu-item-container">
<div [className]="isnextExpanded?'active-border-bottom':'inactive-border-bottom'">
<div class="top-menu-item">5. Next Steps</div>
</div>
</div>
<div class="top-menu-icon-container">
<i class="fas fa-print top-menu-icon"></i>
<i class="fas fa-share-alt top-menu-icon"></i>
</div>
</div>
And here is CSS:
.scroll1::-webkit-scrollbar {
width: 0px;
height: 3px;
}
.scroll1::-webkit-scrollbar-track {
background: #eff0f0;
}
.scroll1::-webkit-scrollbar-thumb {
background: #666;
}
.main-container-top-menu {
scrollbar-width: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.top-menu-item-container-empty {
border-bottom: 2px solid #eff0f0;
font-family: "Roboto", sans-serif;
border-right: 2px solid #eff0f0;
box-sizing: border-box;
color: #626262;
font-size: 14px;
font-weight: 350;
user-select: none;
justify-content: space-between;
}
.top-menu-item-container {
border-bottom: 2px solid #eff0f0;
font-family: "Roboto", sans-serif;
border-right: 2px solid #eff0f0;
box-sizing: border-box;
color: #626262;
font-size: 14px;
font-weight: 350;
user-select: none;
flex: 1;
justify-content: space-between;
}
.active-border-bottom {
align-items: center;
display: flex;
padding-left: 20px;
padding-right: 20px;
height: 100%;
border-bottom: 3px solid #eb2028;
box-sizing: border-box;
}
.inactive-border-bottom {
align-items: center;
display: flex;
padding-left: 20px;
padding-right: 20px;
height: 100%;
}
.top-menu-item-active {
cursor: pointer;
font-family: "Roboto", sans-serif;
padding: 5px;
font-family: "Roboto", sans-serif;
box-sizing: border-box;
color: #1d1d1d;
font-size: 14px;
font-weight: 350;
user-select: none;
align-items: center;
justify-content: center;
display: flex;
stroke-width: 0.6px;
-webkit-text-stroke-width: 0.6px;
flex: 1;
}
.top-menu-item {
cursor: pointer;
padding: 10px;
font-family: "Roboto", sans-serif;
box-sizing: border-box;
color: #626262;
font-size: 14px;
user-select: none;
align-items: center;
justify-content: center;
display: flex;
flex: 1;
}
.top-menu-item-first {
cursor: default;
border-right: 2px solid #eff0f0;
font-size: 14px;
padding-right: 20px;
font-weight: 800;
border-bottom: 2px solid #eff0f0;
border-left: none;
text-align: left;
justify-content: left;
flex: 1;
}
.top-right-menu-item {
/* margin-right: 50px; */
border-bottom: 2px solid #eff0f0;
height: 100%;
display: inline-flex;
justify-content: flex-end;
align-items: center;
}
.top-item-logo {
height: 55px;
z-index: 100;
width: 55px;
object-fit: contain;
}
.top-menu-icon-container{
display: flex;
align-items: center;
justify-content: center;
}
.top-menu-icon {
cursor: pointer;
margin-right: 25px;
margin-left: 25px;
cursor: pointer;
width: 14px;
padding-top: 25px;
padding-bottom: 25px;
}
.left-arrow,
.right-arrow {
display: none;
}
#media screen and (max-width: 768px) {
.constructor-top-container {
justify-content: center;
padding-left: 3%;
}
}
#media screen and (max-width: 1088px) {
.top-right-menu-item {
padding-left: 10px;
margin-right: 0px;
border-bottom: 2px solid #eff0f0;
flex: 1;
height: 100%;
display: inline-flex;
justify-content: flex-end;
align-items: center;
}
.main-container-top-menu {
padding-left: 0;
padding-right: 0;
padding-bottom: 3px;
}
}
#media screen and (max-width: 414px) {
.top-menu-icon {
margin-right: 15px;
cursor: pointer;
width: 14px;
padding-top: 12px;
}
.scroll1::-webkit-scrollbar {
width: 0px;
height: 0px;
}
.scroll1::-webkit-scrollbar-track {
background: #eff0f0;
}
.scroll1::-webkit-scrollbar-thumb {
background: #666;
}
.top-menu-item-first {
padding-left: 35px;
}
.main-container-top-menu {
transition: 0.2s all;
min-height: 62px;
}
.top-item-logo {
position: absolute;
top: 0;
right: 0px;
margin: 0;
padding: 0;
z-index: 100;
height: 62px;
width: 62px;
object-fit: contain;
}
.left-arrow {
height: 60px;
padding-left: 5px;
padding-right: 5px;
background: white;
display: flex;
align-items: center;
position: absolute;
cursor: pointer;
color: #d1d1d1;
top: 0px;
font-size: 1.6rem;
left: 0;
z-index: 5;
padding-left: 7px;
}
.right-arrow {
height: 60px;
padding-left: 5px;
padding-right: 5px;
background: white;
display: flex;
align-items: center;
position: absolute;
cursor: pointer;
color: #b1b1b1;
font-size: 1.6rem;
left: calc(100% - 88px);
}
}
#media screen and (max-width: 1088px) {
.main-container-top-menu {
overflow-x: auto;
overflow-y: hidden;
/* display: block; */
width: 100%;
white-space: nowrap !important;
}
}
#media screen and (max-width: 414px) {
.main-container {
padding-left: 0px;
padding-right: 0px;
}
}
.no-suite-title {
text-transform: uppercase;
font-size: 1.3em;
font-weight: 300;
position: absolute;
left: 10%;
top: 50%;
z-index: 1000;
}
Workink jsFiddle!
How can I make dropdown to fill the menuc without gaps?
Update
Text moved to the left:
To get the desired result, you need to do the following:
Remove padding-left: 20px and padding-right: 20px from the .inactive-border-bottom selector;
Add height: 100% to these selectors - .control and .select.is-fullwidth.
Need to register .full-height in your css, and write the rule height: 100%!important in it. !important is necessary because this rule overrides the height: 2.5em rule in the .select select.
I have been trying to align some text inside a circle in my webpage.
So far i have been able to come up with the following:
From looking at it, it's not the best solution so I was wondering if you have any recommendation how to make sure that the text "LM" or "TM" is perfectly centered inside the circle (if that's possible).
Here is the fiddle:
Sample Demo
html:
.performance-box-container {
margin: 5px;
padding: 5px;
}
.performance-box {
width: 120px;
height: 60px;
margin: 0px 5px 5px 0px;
padding: 5px 5px 10px 5px;
border: 2px solid #868686;
background-color: rgba(202, 202, 202, 0.5);
display: inline-block;
}
.performance-box-name-in-circle {
height: 40px;
width: 40px;
border: 2px solid #000;
background-color: #fff;
border-radius: 50%;
font-weight: bold;
font-size: 12px;
display: inline-block;
}
.performance-box-name-in-circle span {
display: table-cell;
vertical-align: middle;
height: 40px;
width: 40px;
text-align: center;
padding: 0;
margin: 0;
}
.performance-box-stats {
margin-left: 5px;
font-size: 10px;
font-weight: bold;
display: inline-block;
}
.performance-box-stats p {
line-height: 1.5;
margin: 0;
}
.performance-box-stats span.positive {
color: #388C00;
}
.performance-box-stats span.unchanged {
color: #000;
}
.performance-box-stats span.negative {
color: #f00;
}
<div class="performance-box-container">
<div class="performance-box">
<div class="performance-box-name-in-circle">
<span>TM</span>
</div>
<div class="performance-box-stats">
<p>DTD: <span class="positive">+3.5%</span></p>
<p>MTD: <span class="unchanged">+0.0%</span></p>
<p>YTD: <span class="negative">-4.5%</span></p>
</div>
</div>
<div class="performance-box">
<div class="performance-box-name-in-circle">
<span>LM</span>
</div>
<div class="performance-box-stats">
<p>DTD: <span class="positive">+3.5%</span></p>
<p>MTD: <span class="unchanged">+0.0%</span></p>
<p>YTD: <span class="negative">-4.5%</span></p>
</div>
</div>
</div>
You can vertically and horizontally align them center using flexbox
display: flex;
justify-content: center;
align-items: center;
.performance-box-name-in-circle,
.performance-box-name-in-circle span {
display: flex;
justify-content: center;
align-items: center;
}
.performance-box-name-in-circle {
height: 40px;
width: 40px;
border: 2px solid #000;
background-color: #fff;
border-radius: 50%;
font-weight: bold;
font-size: 12px;
}
<div class="performance-box-name-in-circle">
<span>LM</span>
</div>
Here is the Updated JSFiddle
Used flexbox to display performance-box-name-in-circle and performance-box-stats side by side and used below css to place span in the center of the circle. Hope this helps. thanks
margin: 50%;
display: inline-block;
transform: translate(-50%, -50%);
.performance-box-container {
margin: 5px;
padding: 5px;
display: flex;
}
.performance-box {
width: 120px;
/* height: 60px; */
margin: 0px 5px 5px 0px;
padding: 5px 5px 10px 5px;
border: 2px solid #868686;
background-color: rgba(202, 202, 202, 0.5);
/* display: inline-block; */
display: flex;
justify-content: center;
align-items: center;
}
.performance-box-name-in-circle {
height: 40px;
width: 40px;
border: 2px solid #000;
background-color: #fff;
border-radius: 50%;
font-weight: bold;
font-size: 12px;
display: inline-block;
}
.performance-box-name-in-circle span {
display: table-cell;
*/
/* vertical-align: middle; */
/* height: 40px; */
/* width: 40px; */
/* text-align: center; */
padding: 0;
margin: 0;
margin: 50%;
/* margin-top: 80px; */
display: inline-block;
transform: translate(-50%, -50%);
}
.performance-box-stats {
margin-left: 5px;
font-size: 10px;
font-weight: bold;
display: inline-block;
}
.performance-box-stats p {
line-height: 1.5;
margin: 0;
}
.performance-box-stats span.positive {
color: #388C00;
}
.performance-box-stats span.unchanged {
color: #000;
}
.performance-box-stats span.negative {
color: #f00;
}
<body>
<div class="performance-box-container">
<div class="performance-box">
<div class="performance-box-name-in-circle">
<span>TM</span>
</div>
<div class="performance-box-stats">
<p>DTD: <span class="positive">+3.5%</span></p>
<p>MTD: <span class="unchanged">+0.0%</span></p>
<p>YTD: <span class="negative">-4.5%</span></p>
</div>
</div>
<div class="performance-box">
<div class="performance-box-name-in-circle">
<span>LM</span>
</div>
<div class="performance-box-stats">
<p>DTD: <span class="positive">+3.5%</span></p>
<p>MTD: <span class="unchanged">+0.0%</span></p>
<p>YTD: <span class="negative">-4.5%</span></p>
</div>
</div>
</div>
</body>
I am running into some issues with resizing of the window (shrinking). When I shrink it down, the background colors no longer stay at the edge of the viewport, and content goes beyond it.
I thought that setting the width on the entire body to 100% would fix that, but it didn't?
Here is a JSFiddle of my current code, for the index page and the stylesheet:
* {
margin: 0;
padding: 0;
}
body {
font-family: Segoe UI, helvetica, arial;
display: flex;
flex-direction: column;
min-height: 100vh;
font-size: 18px;
width: 100%;
}
a {
color: hsl(344, 69%, 70%);
font-weight: bold;
}
a:hover {
text-decoration: none;
color: #67c3b2;
}
.menu-container {
background-color: rgba(150, 150, 150, 0.2);
padding: 20px 0;
display: flex;
justify-content: center;
text-transform: uppercase;
width: 100%;
}
.menu {
width: 90%;
display: flex;
top: 10px;
justify-content: space-between;
font-size: 16px;
overflow: hidden;
position: relative;
left: 10px;
}
.header-container {
background-color: rgba(150, 150, 150, 0.2);
display: flex;
justify-content: center;
height: 30px;
width: 100%;
position: relative;
}
.logo {
position: relative;
bottom: 37px;
z-index: 1;
}
.flex-container {
display: flex;
justify-content: center;
}
.flex-container p {
position: relative;
margin-left: 40px;
margin-right: 40px;
font-weight: bold;
top: 40px;
margin-top: 40px;
text-align: center;
}
.main {
display: flex;
color: #464646;
background: linear-gradient(to right, #77C9D4, #57BC90);
flex: 1;
}
.cakelist {
position: relative;
bottom: 50px;
display: flex;
font-weight: bold;
list-style-position: inside;
margin-top: 130px;
}
.cakelist ol,
table {
margin-left: 25px;
}
.cakelist h2 {
margin-left: 25px;
margin-top: 20px;
}
.carousel {
color: #464646;
top: 80px;
position: relative;
display: flex;
justify-content: center;
border: 3px outset gray;
align-items: center;
padding: 60px 60px 60px 60px;
}
.buttons {
position: relative;
width: 1600px;
margin-right: 25px;
justify-content: space-around;
display: flex;
top: 160px;
text-align: center;
}
.button a:hover {
opacity: 0.2;
}
.buttons p {
margin-top: 20px;
}
.buttons img {
padding-top: 25px;
height: 200px;
}
.gallery {
position: relative;
top: 80px;
}
.pricing {
display: flex;
position: relative;
top: 80px;
justify-content: center;
flex-direction: column;
padding-bottom: 140px;
}
.pricing p,
h1 {
margin-left: 250px;
text-align: left;
margin-top: 5px;
}
.pricing span {
opacity: 0;
user-select: none;
}
.order {
position: relative;
border-radius: 5px;
background: hsl(344, 69%, 70%);
top: 20px;
margin-top: 60px;
padding: 5px;
}
#order-link {
color: white;
text-decoration: none;
}
.order-button {
width: 180px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.footer-container {
display: flex;
justify-content: flex-end;
align-items: center;
background: #9A9A9A;
height: 90px;
max-height: 90px;
}
.footer-logo {
height: 80px;
position: relative;
right: 10px;
}
.subscribe {
border-radius: 25px;
background: hsl(344, 69%, 70%);
padding: 5px 20px 5px 20px;
width: 80px;
}
#subscribe-link {
position: relative;
color: white;
text-decoration: none;
right: 40px;
}
<div class="menu-container">
<div class="menu">
<div class="flex-item">About Us</div>
<div class="flex-item">Cakes</div>
<div class="flex-item">Cupcakes</div>
<div class="flex-item">Gallery</div>
<div class="flex-item">Prices/Order</div>
<div class="flex-item">Search</div>
</div>
</div>
<header class="header-container">
<img src="TCCLogo.png" class="logo" />
</header>
<div class="flex-container main">
<div class="container">
<div class="carousel">
Here is where I will have the quick gallery/carousel when I get to JS.
</div>
<div class="buttons">
<div class="button">
<img src="cake.png" />
<p>Check out our delicious cake options!</p>
</div>
<div class="button">
<img src="cupcake.png" />
<p>Check out our delicious cupcake options!</p>
</div>
<div class="button">
<img src="prices.png" />
<p>Check out our competitive pricing!</p>
</div>
</div>
</div>
</div>
<footer class="footer-container">
<a id="subscribe-link" target="_blank" href="#">
<div class="subscribe">
<p>Subscribe</p>
</div>
</a>
<img src="TCCLogo.png" class="footer-logo" />
</footer>
I have tried going through my stylesheet, changing the widths on anything I have set with pixels to percentages, but it didn't seem to fix it. The only thing that -sort of- worked was changing the body position to fixed, but then none of the content was view-able if it got shrunk down, all it fixed was keeping the background/header/footer colors the same.
I imagine maybe my coding is a bit messy - I tried my best to be extensible, but being 100% new at this made it difficult.
Your problem is that you have width:1600px in .buttons just remove it and also add box-sizing:border-box to all (pseudo-)elements
EDIT:
you also need to add max-width:100% to .container and flex-wrap:wrap in .buttons
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box
}
body {
font-family: Segoe UI, helvetica, arial;
display: flex;
flex-direction: column;
min-height: 100vh;
font-size: 18px;
}
a {
color: hsl(344, 69%, 70%);
font-weight: bold;
}
a:hover {
text-decoration: none;
color: #67c3b2;
}
.menu-container {
background-color: rgba(150, 150, 150, 0.2);
padding: 20px 0;
display: flex;
justify-content: center;
text-transform: uppercase;
width: 100%;
}
.menu {
width: 90%;
display: flex;
top: 10px;
justify-content: space-between;
font-size: 16px;
overflow: hidden;
position: relative;
left: 10px;
}
.header-container {
background-color: rgba(150, 150, 150, 0.2);
display: flex;
justify-content: center;
height: 30px;
width: 100%;
position: relative;
}
.logo {
position: relative;
bottom: 37px;
z-index: 1;
}
.flex-container {
display: flex;
justify-content: center;
}
.flex-container p {
position: relative;
margin-left: 40px;
margin-right: 40px;
font-weight: bold;
top: 40px;
margin-top: 40px;
text-align: center;
}
.main {
display: flex;
color: #464646;
background: linear-gradient(to right, #77C9D4, #57BC90);
flex: 1;
}
.cakelist {
position: relative;
bottom: 50px;
display: flex;
font-weight: bold;
list-style-position: inside;
margin-top: 130px;
}
.cakelist ol,
table {
margin-left: 25px;
}
.cakelist h2 {
margin-left: 25px;
margin-top: 20px;
}
.container {
max-width: 100%
}
.carousel {
color: #464646;
top: 80px;
position: relative;
display: flex;
justify-content: center;
border: 3px outset gray;
align-items: center;
padding: 60px;
}
.buttons {
position: relative;
margin-right: 25px;
justify-content: space-around;
display: flex;
flex-wrap: wrap;
top: 160px;
text-align: center;
}
.button a:hover {
opacity: 0.2;
}
.buttons p {
margin-top: 20px;
}
.buttons img {
padding-top: 25px;
height: 200px;
}
.gallery {
position: relative;
top: 80px;
}
.pricing {
display: flex;
position: relative;
top: 80px;
justify-content: center;
flex-direction: column;
padding-bottom: 140px;
}
.pricing p,
h1 {
margin-left: 250px;
text-align: left;
margin-top: 5px;
}
.pricing span {
opacity: 0;
user-select: none;
}
.order {
position: relative;
border-radius: 5px;
background: hsl(344, 69%, 70%);
top: 20px;
margin-top: 60px;
padding: 5px;
}
#order-link {
color: white;
text-decoration: none;
}
.order-button {
width: 180px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.footer-container {
display: flex;
justify-content: flex-end;
align-items: center;
background: #9A9A9A;
height: 90px;
max-height: 90px;
}
.footer-logo {
height: 80px;
position: relative;
right: 10px;
}
.subscribe {
border-radius: 25px;
background: hsl(344, 69%, 70%);
padding: 5px 20px 5px 20px;
width: 80px;
}
#subscribe-link {
position: relative;
color: white;
text-decoration: none;
right: 40px;
}
<div class="menu-container">
<div class="menu">
<div class="flex-item">About Us</div>
<div class="flex-item">Cakes</div>
<div class="flex-item">Cupcakes</div>
<div class="flex-item">Gallery</div>
<div class="flex-item">Prices/Order</div>
<div class="flex-item">Search</div>
</div>
</div>
<header class="header-container">
<img src="TCCLogo.png" class="logo" />
</header>
<div class="flex-container main">
<div class="container">
<div class="carousel">
Here is where I will have the quick gallery/carousel when I get to JS.
</div>
<div class="buttons">
<div class="button">
<img src="cake.png" />
<p>Check out our delicious cake options!</p>
</div>
<div class="button">
<img src="cupcake.png" />
<p>Check out our delicious cupcake options!</p>
</div>
<div class="button">
<img src="prices.png" />
<p>Check out our competitive pricing!</p>
</div>
</div>
</div>
</div>
<footer class="footer-container">
<a id="subscribe-link" target="_blank" href="#">
<div class="subscribe">
<p>Subscribe</p>
</div>
</a>
<img src="TCCLogo.png" class="footer-logo" />
</footer>
I have made it proper as you needed. And it's working for me.
Please add below css
.container, .buttons {
max-width: 100%;
}
I received help centering an image within a box using a "helper" pseudo element element, which was working until I published it live. I'm not sure what's going on.
you can see whats going on at live link. And this is the code I was using for the layout
Code:
.offer {
width: 288px;
float: left;
margin-right: 25px;
}
.box {
position: relative;
display: block;
border: solid 3px #19468d;
height: 310px;
width: 100%;
margin-top: 11px;
text-align: center;
}
.price span {
font-family: avenir next;
font-weight: 700;
background-color: #19468d;
color: white;
font-size: 21px;
padding: 0px 5px;
left: 0;
padding-left: 0;
}
.price a {
position: relative;
font-family: avenir next;
font-weight: 700;
background-color: #19468d;
color: white;
font-size: 21px;
padding: 1px 7px;
left: 3px;
bottom: 1px;
border-style: solid;
border-color: #19468d;
}
.price a:hover {
color: #19468d;
background-color: white;
border-style: solid;
}
#cost {
position: absolute;
left: 0px
}
#info {
position: absolute;
bottom: 0px;
right: 0px
}
.box img {
display: inline-block;
margin: 0 auto;
text-align: center;
max-width: 252px;
vertical-align: center;
}
#grid {
margin: 0px;
display: flex;
display: -webkit-flex;
/* Safari 8 */
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
/* Safari 8 */
-webkit-justify-content: center;
/* Safari 8 */
margin-left: 20px;
}
.helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.price {
text-align: left
}
.price #dollar {
padding-right: 0px;
padding-left: 5px;
}
<div class="offer">
<div class="box">
<div class="price">
<span id="dollar">$</span><span>27</span>
</div>
<span class="helper"></span>
<img src="http://cdn2.hubspot.net/hubfs/75704/JPs-Slices/2016_Yes/img/floorexammat.jpg">
<div class="price" id="info">
Buy Now
</div>
</div>
Rather use flex for the images. On the ".box" you can do
display:flex;
justify-content: center;
and remove the helper.