i cant make responsive please help me. im using bootstrap .container structure for automatic design.
they are
and they are css codes;
#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#500&family=Oswald:wght#300&display=swap');
*{
box-sizing: border-box;
margin:0;
padding: 0;
background-color: #24252a;
}
li, a, button {
font-family: "Montserrat" , sans-serif;
font-weight: 500;
font-size: 16px;
color: #edf0f1;
text-decoration: none;
}
header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px 10%;
}
.logo{
cursor:pointer
}
.nav_links{
list-style: none;
}
.nav_links li{
display: inline-block;
padding: 0px 20px;
}
.nav_links li a{
transition: all 0.3 ease 0s;
}
.nav_links li a:hover{
color:#0088a9
}
button{
padding: 9px 25px;
background-color: rgba(0, 136, 169, alpha);
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3 ease 0s;
}
button:hover{
background-color: rgba(0, 136, 169, 0.8);
}
`
i did try ".container" structure for automatic design. but this is not working and my codes are broken.i cant do this. please help me for responsive design. ive just started.
Related
I am having an issue with my navbar, once I make the browser tab smaller, the text stays the same size but the logo gets smaller and smaller and disappears. How can I make it so everything gets smaller? If any more information is needed I will provide them. Here are some examples of my problem.
100% width page vs Page made smaller for smaller screens for example
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
/* custom scroll bar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::selection {
background: rgb(0, 123, 255, 0.3);
}
.content {
max-width: 1250px;
margin: auto;
padding: 0 30px;
}
/* Nav start*/
.navbar {
position: fixed;
width: 100%;
z-index: 2;
padding: 25px 0;
transition: all 0.3s ease;
background-color: black;
}
.navbar.sticky {
background: black;
padding: 10px 0;
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.1);
}
.navbar .content {
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a {
color: #fff;
font-size: 30px;
font-weight: 600;
text-decoration: none;
}
.navbar .menu-list {
display: inline-flex;
}
.menu-list li {
list-style: none;
}
.menu-list li a {
color: #fff;
font-size: 18px;
font-weight: 500;
margin-left: 20px;
text-decoration: none;
transition: all 0.3s ease;
}
.menu-list li a:hover {
color: #007bff;
}
.banner {
height: 100vh;
background-position: center;
background-attachment: fixed;
}
.about {
padding: 30px 0;
}
.about .title {
font-size: 38px;
font-weight: 700;
}
.about p {
padding-top: 20px;
text-align: justify;
}
.icon {
color: #fff;
font-size: 20px;
cursor: pointer;
display: none;
}
.menu-list .cancel-btn {
position: absolute;
right: 30px;
top: 20px;
}
#media (max-width: 1230px) {
.content {
padding: 0 60px;
}
}
#media (max-width: 1100px) {
.content {
padding: 0 40px;
}
}
#media (max-width: 900px) {
.content {
padding: 0 30px;
}
}
#media (max-width: 868px) {
body.disabled {
overflow: hidden;
}
.icon {
display: block;
}
.icon.hide {
display: none;
}
.navbar .menu-list {
position: fixed;
height: 100vh;
width: 100%;
max-width: 400px;
left: -100%;
top: 0px;
display: block;
padding: 40px 0;
text-align: center;
background: #222;
transition: all 0.3s ease;
}
.navbar.show .menu-list {
left: 0%;
}
.navbar .menu-list li {
margin-top: 45px;
}
.navbar .menu-list li a {
font-size: 23px;
margin-left: -100%;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.navbar.show .menu-list li a {
margin-left: 0px;
}
}
#media (max-width: 380px) {
.navbar .logo a {
font-size: 27px;
}
}
.cta {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s ease 0s;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}
/* Nav end*/
<nav class="navbar">
<div class="content">
<div class="logo">
<img src="images/logo-villa-dor.jpg" width="100%">
</div>
<ul class="menu-list">
<div class="icon cancel-btn">
<i class="fas fa-times"></i>
</div>
<li>Fireplaces</li>
<li>Floorings</li>
<li>IronWorks</li>
<li>Ornaments</li>
<li>Woodwork</li>
<li>Radiators</li>
<li>Luminary</li>
<li>Miscellaneous</li>
</ul>
<div class="icon menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
I think you're using #media wrong.
#media (max-width: 868px)
indicates that these styles will be applied when it has a max width of 868px. So for small screens you need to decrease the font-size in there.
#media (max-width: 868px) {
.navbar .menu-list li a{
font-size: 16px; // for example
margin-left: -100%;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265,
1.55);
}
}
I see some issues in your styles that have proven to be problematic for your design. For sake of demonstrating the media-queries behavior, I have deleted all your media queries and made just one that points to your <ul> and your logo, which appears to be the focal point in this example.
Please see the CSS changes I made between /* Media Start & /* Media End */. Also, my suggestion, if you are flexing the navbar, would be to use display: flex; instead of inline-flex. Then you can add justify-content: space-between; to properly align your nav components. Next, this is just out of preference, but I wouldn't suggest spacing your li's with margin-left because then you get left margin on your "Fireplaces" <li> which is just unnecessary margin. I used gap: 10px; as an alternative.
Please see the changes to the logo as well. With this correct structure for your media-queries, I believe it will be much easier for you to manipulate. Without being able to see your image or the size of it, it's challenging to give you an exact height & width so adjust the 25px around as necessary. Finally, setting font-sizes on logos or images won't be useful, unless there is a text element within the containing parent div of the image or logo.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
/* custom scroll bar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::selection{
background: rgb(0,123,255,0.3);
}
.content{
max-width: 1250px;
margin: auto;
padding: 0 30px;
}
/* Nav start*/
.navbar{
position: fixed;
width: 100%;
z-index: 2;
padding: 25px 0;
transition: all 0.3s ease;
background-color: black;
}
.navbar.sticky{
background: black;
padding: 10px 0;
box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.navbar .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.navbar .logo a{
color: #fff;
font-size: 30px;
font-weight: 600;
text-decoration: none;
}
.navbar .menu-list{
display: flex;
justify-content: space-between;
gap: 10px;
}
.menu-list li{
list-style: none;
}
.menu-list li a{
color: #fff;
font-size: 18px;
font-weight: 500;
text-decoration: none;
transition: all 0.3s ease;
}
.menu-list li a:hover{
color: #007bff;
}
.banner{
height: 100vh;
background-position: center;
background-attachment: fixed;
}
.about{
padding: 30px 0;
}
.about .title{
font-size: 38px;
font-weight: 700;
}
.about p{
padding-top: 20px;
text-align: justify;
}
.icon{
color: #fff;
font-size: 20px;
cursor: pointer;
display: none;
}
.menu-list .cancel-btn{
position: absolute;
right: 30px;
top: 20px;
}
.cta {
padding: 9px 25px;
background-color: rgba(0, 136, 169, 1);
border: none;
border-radius: 50px;
cursor: pointer;
transition: background-color 0.3s ease 0s;
}
.cta:hover {
background-color: rgba(0, 136, 169, 0.8);
}
/* Nav end*/
/* Media Start */
#media only screen and (max-width: 800px) {
ul.menu-list li a {
font-size: 10px;
}
.logo {
width: 25px;
height: 25px;
}
}
/* Media End */
<nav class="navbar">
<div class="content">
<div class="logo">
</div>
<ul class="menu-list">
<div class="icon cancel-btn">
<i class="fas fa-times"></i>
</div>
<li>Fireplaces</li>
<li>Floorings</li>
<li>IronWorks</li>
<li>Ornaments</li>
<li>Woodwork</li>
<li>Radiators</li>
<li>Luminary</li>
<li>Miscellaneous</li>
</ul>
<div class="icon menu-btn">
<i class="fas fa-bars"></i>
</div>
</div>
</nav>
EDIT:
.navbar .content {
display: flex;
align-items: baseline;
justify-content: space-between;
align-content: center;
}
Then I would add two media queries like so :
#media only screen and (max-width: 1060px) {
.menu-list li a {
font-size: 13px;
}
}
#media only screen and (max-width: 945px) {
.menu-list li a {
font-size: 11.5px;
}
}
I want that the size of my button should get fixed for the mobile view but it should be auto for window. how can I do it, please help? Or it should be auto placed in the center. I am using this code. I am using CSS like this.
.button1 {
border: 2px solid rgb(0, 0, 0);
box-sizing: inherit;
background-color: #ffffff;
margin-right: 1.7px;
color: black;
font-size: 18px;
font-weight: 980;
padding: 6px 42px;
text-align: center;
transition: all 0.3s ease-in-out 0s;
width: 96.6px;
text-decoration: none;
line-height: 22px;
font-size: 16px;
font-family: domine;
display: inline-table;
}
.button2 {
border: 2px solid rgb(255, 87, 51);
background-color: #FF5733;
box-sizing: inherit;
margin-right: 1.7px;
color: white;
font-size: 18px;
font-weight: 980;
padding: 6px 42px;
text-align: center;
transition: all 0.3s ease-in-out 0s;
width: 96.6px;
text-decoration: none;
line-height: 22px;
font-size: 16px;
font-family: domine;
display: inline-table;}
.button2 a:link, .button2 a:visited {
background-color: #FF5733;
color: white;
text-decoration: none;
}
.button2 a:hover, .button2 a:active {
background-color: #FF5733;
color:#000000;
}
#media screen and (max-width: 680px) and (min-width:0px){
.button2 { padding: 6px 32px;width: 85px;display: inline-table;max-height:80px;
}
.button1 { padding: 6px 32px;width: 85px;max-height:88px;}
}}
<button style="margin:auto"class="button button1">BUY NOW</button><button style="margin:auto;" class="button button2">DETALS</button>
Could the issue be that you have the button style set to auto in your inline CSS in your html page? That would override the margins you are setting in your CSS page. Maybe that is effecting the way the buttons are being displayed, because the media query looks good. I really hope this helps. Good luck!
I am using a CSS button code, but I found some problem in doing it. I want that the width of my button should get fixed for the mobile view but it should be auto for the window. how can I do it, please help? Or it should be auto placed in the center. I am using this code. I am using CSS like this.
CSS code :
.button1
{
border: 2px solid rgb(0, 0, 0);
box-sizing: inherit;
background-color: #ffffff;
margin-right: 1.7px;
color: black;
font-size: 18px;
font-weight: 980;
padding: 6px 42px;
text-align: center;
transition: all 0.3s ease-in-out 0s;
width: 96.6px;
text-decoration: none;
line-height: 22px;
font-size: 16px;
font-family: domine;
display: inline-table;
}
.button2
{
border: 2px solid rgb(255, 87, 51);
background-color: #FF5733;
box-sizing: inherit;
margin-right: 1.7px;
color: white;
font-size: 18px;
font-weight: 980;
padding: 6px 42px;
text-align: center;
transition: all 0.3s ease-in-out 0s;
width: 96.6px;
text-decoration: none;
line-height: 22px;
font-size: 16px;
font-family: domine;
display: inline-table;
}
.button2 a:link, .button2 a:visited
{
background-color: #FF5733;
color: white;
text-decoration: none;
}
.button2 a:hover, .button2 a:active
{
background-color: #FF5733;
color:#000000;
}
#media screen and (max-width: 680px) and (min-width:0px)
{
.button2 { padding: 6px 32px;width: 85px;display: inline-table;max-height:80px;}
.button1 { padding: 6px 32px;width: 85px;max-height:88px;}
}
HTML code:
<button class="button button1">
BUY NOW
</button>
<button class="button button2">
DETALS
</button>
For a start, change the button display from inline-table to inline-block
Please offer some advice and suggestions as to how to enable a mobile first responsive header. i cant seem to keep my content to the left when at mobile screen size also i need the header and back button to be the same size. Also when at a full screen size the header area doesn't spread. i use Flex-box but finding it difficult to align this particular content in the header. Any advise suggestions would be more than appreciated.
.header {
display: flex;
justify-content: space-between;
background: #633;
padding: 10px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
justify-content: center;
}
.header a:hover {
color: black;
}
.logo {
display: flex;
align-items: flex-start;
transition: background 250ms ease-in-out, transform 150ms ease;
-webkit-appearance: none;
-moz-appearance: none;
}
.home-button {
display: inline-block;
border: none;
padding: 1rem 2rem;
margin-right: 20px;
border-radius: 4px;
text-decoration: none;
background: dodgerblue;
color: #ffffff;
font-family: sans-serif;
font-size: 1rem;
cursor: pointer;
text-align: center;
transition: background 250ms ease-in-out, transform 150ms ease;
-webkit-appearance: none;
-moz-appearance: none;
}
.header-right {
float: right;
}
a.home-button:hover,
a.home-button:focus {
background: #434344;
}
#media only screen and (min-width: 300px) {
.header,
.header a,
.home-button,
.logo {
display: flex;
justify-content: flex-start;
float: none;
display: block;
padding: 5px;
}
.header-right {
float: none;
}
}
/* end of header*/
/***********************************************
**********************************************
*********************************************/
/* Back button CSS*/
.button {
display: inline-block;
border: none;
padding: 1rem 2rem;
margin-right: 20px;
border-radius: 4px;
text-decoration: none;
background: dodgerblue;
color: #ffffff;
font-family: sans-serif;
font-size: 1rem;
cursor: pointer;
text-align: center;
transition: background 250ms ease-in-out, transform 150ms ease;
-webkit-appearance: none;
-moz-appearance: none;
}
.button:hover,
.button:focus {
background: #434344;
}
.button:focus {
outline: 1px solid #fff;
outline-offset: -4px;
}
.button:active {
transform: scale(0.99);
}
<div class="header">
<div class="header-right">
<img src="images/cw_logo.png" alt="company-logo">
<a class="home-button" href="#home">Home</a>
<a class="email" href="email#emailyou.com">email#emailyou.com</a>
<a href="#about">
<p>1234567890</p>
</a>
<button class="button" onclick="goBack()">Go Back</button>
</div>
</div>
Following with ADA-compliant, I need to make the navbar expand either when the user's mouse is over at the navbar (using :hover) or if the user's mouse is focused on one of the items in the navbar.
Although I was able to figure it the first part, I am having trouble implementing the second requirement.
Here's a code snippet to demonstrate my current implementation:
https://codepen.io/neotriz/pen/MoBMvz?editors=1100
CSS:
.nav-template {
height: 100%;
position: absolute;
transition: width 0.3s linear;
display: flex;
overflow: hidden;
background: black;
width: 70px;
&:hover{
width: 150px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
li {
margin: 0;
padding: 0;
cursor: pointer;
&:hover {
background-color: rgba(255, 255, 255, 0.12);
}
a {
color: white;
height: 40px;
margin-left: 12px;
margin-right: 35px;
padding-bottom: 10px;
display: flex;
align-items: center;
text-decoration: none;
}
}
}
}
It looks like if I apply &:focus where &:hover is, it doesn't work because it is thinking the entire navbar needs to be selected in order to expand it, as suppose to focusing on each individual items.
Is my current implementation needs some reworking?
Try Some thing Like this
HTML
<div tabindex="1" class="nav-template">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
LESS
.nav-template {
height: 100%;
position: absolute;
display: flex;
overflow: hidden;
background: black;
ul {
list-style-type: none;
margin: 0;
padding: 0;
transition: width 0.3s linear;
li {
margin: 0;
padding: 0;
cursor: pointer;
a {
color: white;
height: 40px;
margin-left: 12px;
margin-right: 35px;
padding-bottom: 10px;
display: flex;
align-items: center;
text-decoration: none;
width:70px;
transition:all ease 0.5s;
&:focus,&:hover {
width: 100px;
background-color: rgba(255, 255, 255, 0.12);
}
}
}
}
}
CSS
.nav-template {
height: 100%;
position: absolute;
display: flex;
overflow: hidden;
background: black;
}
.nav-template ul {
list-style-type: none;
margin: 0;
padding: 0;
transition: width 0.3s linear;
}
.nav-template ul li {
margin: 0;
padding: 0;
cursor: pointer;
}
.nav-template ul li a {
color: white;
height: 40px;
margin-left: 12px;
margin-right: 35px;
padding-bottom: 10px;
display: flex;
align-items: center;
text-decoration: none;
width:70px;
transition:all ease 0.5s;
}
.nav-template ul li a:focus,
.nav-template ul li a:hover {
width: 100px;
background-color: rgba(255, 255, 255, 0.12);
}
use :focus on the anchor tag increase its width, :focus works on div but the problem here is when you are focusing it is directly focused on the anchor tag but not on the div or the li or ul
add these rules for transition
.nav-template ul li a{
width:70px;
transition:all ease 0.5s;
}
Link For reference
give this a try
hope this helps...