Skip to content

Commit

Permalink
responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kratik1093
Kratik1093 committed Oct 6, 2024
1 parent 2a3c571 commit 64beff7
Show file tree
Hide file tree
Showing 10 changed files with 434 additions and 60 deletions.
79 changes: 79 additions & 0 deletions Css-files/about.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -562,3 +562,82 @@
}


@media only screen and (max-width: 768px) {
.menu_container, .first_cont, .cart-section {
padding: 20px;
flex-direction: column;
}

.menu_items .items, .first_cont .items {
width: 90%;
margin: 10px auto;
}

.cart {
flex-direction: column;
width: 100%;
}

.footer-colums {
flex-direction: column;
text-align: center;
margin-bottom: 20px;
}

#contactForm {
width: 100%;
padding: 10px;
}
}
/* Media Queries for Responsive Footer */

/* For tablets and smaller devices (screen width 768px or less) */
@media only screen and (max-width: 768px) {
.foot-panel2 {
flex-direction: column; /* Stack the footer columns vertically */
text-align: center; /* Center align the text */
height: auto; /* Adjust the height to fit the content */
padding: 20px;
}

.footer-colums {
margin: 10px 0; /* Add margin between stacked columns */
}

.social-icons {
justify-content: center; /* Center align the social icons */
}

.social-icons a {
margin: 5px 10px; /* Reduce spacing around the icons */
font-size: 1.2rem; /* Adjust icon size for smaller screens */
}

.foot_panel4 {
height: auto;
padding: 10px;
font-size: 0.8rem; /* Reduce font size */
}
}

/* For mobile devices (screen width 480px or less) */
@media only screen and (max-width: 480px) {
.foot-panel2 {
padding: 15px;
}

.footer-colums p,
.footer-colums a {
font-size: 1rem; /* Smaller font size for links and text */
}

.social-icons a {
margin: 5px; /* Reduce margin between social icons */
font-size: 1rem; /* Further reduce icon size */
}

.foot_panel4 {
font-size: 0.7rem; /* Even smaller text for copyright or bottom info */
}
}

254 changes: 238 additions & 16 deletions Css-files/content.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

* {
margin: 0px;
padding: 0px;
Expand Down Expand Up @@ -181,16 +182,16 @@ input[type="submit"]:hover {
border-radius: 15px;
display: inline-block;
color: white;
transition: 0.3s ease-in-out;
/* transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease; Smooth transition */
}

.butt:hover {
background-color: white !important;

color: brown !important;
/* background-color: #ffffff; */
background-color: brown !important;
color:white !important;
border: 3px solid rgb(165, 42, 42);
transform: scale(1.01);

/* animation: bounce 0.5s; */
}
@keyframes bounce {
0%, 100% {
Expand All @@ -211,17 +212,12 @@ input[type="submit"]:hover {
box-shadow: 0 0 10px rgba(224, 224, 252, 0.678);
border: 1px solid rgb(186, 186, 201);
padding: 40px;
margin: 10px;
margin: 5px;
height: 310px;
width: 230px;
border-radius: 15px;
border-radius: 10px;
text-align: center;
font-family: "Bree Serif", serif;
transition: 0.5s ease-in-out;
}
.menu_items :hover{
background-color:#fff4f4 ;
transform: scale(1.05);
}

.menu_items .items img {
Expand Down Expand Up @@ -323,9 +319,6 @@ div.deals:hover{
color: brown !important;
}

.deals:hover p a{
color: brown !important;
}
.deals p{
font-size: 1.1rem;
padding-top: 2px;
Expand Down Expand Up @@ -614,4 +607,233 @@ input
border-radius: 50%;
padding: 5px 8px;
font-size: 12px;
}
}

/* Media query for devices with a max-width of 768px (tablets, phones, etc.) */
@media (max-width: 768px) {
/* Navbar adjustments */
.navbar li {
padding: 5px 10px;
font-size: 1rem;
}
.menu_container h2 {
text-align: center;
padding-left: 0; /* Reset padding to center the text */
}

.first_cont .items {
width: 90%; /* Adjust width for smaller screens */
padding: 20px; /* Smaller padding for better spacing */
margin: 10px auto; /* Center the items and adjust margin */
height: auto; /* Let height adjust dynamically based on content */
}

.first_cont .items img {
height: 140px; /* Resize image to fit mobile layout */
width: 180px;
}

.first_cont .items h3 {
font-size: 1rem; /* Adjust font size for smaller screens */
}

.first_cont .items p {
margin-bottom: 15px; /* Adjust margin for consistency */
}

/* Head container adjustments */
.head_container_service {
height: auto; /* Adjust height to fit content */
padding: 20px;
}
.upper {
margin-top: -3rem;
}

/* Menu container */
.menu_container {
padding: 30px 40px 20px 40px;
}
.menu_items .items {
width: 90%;
padding: 20px;
margin: 10px;
height: auto;
}
.menu_items .items img {
height: 140px;
width: 180px;
}

/* Main header text */
.mainhead h1 {
font-size: 2.5rem;
}

/* Buttons and input fields */
.but a,
.butt,
input[type="submit"] {
padding: 8px 12px;
font-size: 1rem;
}

/* Testimonial section adjustments */
.testimonalsection {
padding-top: 200px;
}
.testimonal__card {
padding: 20px;
margin: 10px;
}
.testimonal__image {
width: 80px;
height: 80px;
}

/* Footer adjustments */
.foot-panel2 {
flex-direction: column;
align-items: center;
height: auto;
}
.footer-colums {
margin-top: 10px;
}

/* Cart section */
.cart {
width: 100%;
padding: 10%;
font-size: 1rem;
}
.cart table {
width: 90%;
font-size: 0.9rem;
}

/* Contact Form */
#contactForm {
width: 100%;
padding: 20px;
}
#contactForm input, #contactForm textarea {
width: 90%;
padding: 10px;
}

/* Adjusting the deals section */
.deals {
flex-direction: column;
align-items: center;
margin: 20px;
padding: 10px;
}

/* Cards section */
.cards {
width: 300px;
height: 300px;
margin: 0 auto;
}

/* Added to cart animation */
.added-to-cart {
margin-left: 10px;
}

/* Icon adjustments */
.social-icons a {
font-size: 1rem;
padding: 10px;
}
.testimonal__container {
flex-direction: column; /* Stack testimonials vertically */
align-items: center; /* Center the testimonials */
}

.testimonal__card {
width: 90%; /* Adjust the width for smaller screens */
margin: 10px auto; /* Center the testimonial cards */
padding: 20px; /* Adjust padding */
}
}

/* Media query for devices with a max-width of 480px (smaller phones) */
@media (max-width: 480px) {
/* Navbar adjustments */
.navbar li {
padding: 3px 5px;
font-size: 0.9rem;
}
.menu_container h2 {
text-align: center;
padding-left: 0; /* Ensure it's centered even on smaller screens */
}
.first_cont {
display: grid;
}
.second_cont{
display: grid;
margin-top: 70px;
}
/* Menu items */
.menu_items .items {
width: 90%;
padding: 10px;
height: auto;
}
.menu_items .items img {
height: 120px;
width: 150px;
}

/* Main header text */
.mainhead h1 {
font-size: 2rem;
}

/* Buttons and input fields */
.but a,
.butt,
input[type="submit"] {
padding: 5px 8px;
font-size: 0.9rem;
}

/* Testimonial section adjustments */
.testimonal__card {
width: 100%;
height: 300px;
padding: 8px;
margin: 120px 5px 5px 5px;
}
.testimonal__image {
width: 60px;
height: 60px;
}

/* Footer adjustments */
.foot-panel2 {
height: auto;
text-align: center;
}

/* Cart section */
.cart table {
font-size: 0.8rem;
}

/* Deals section */
.deals {
padding: 5px;
margin: 15px;
}

/* Cards section */
.cards {
width: 200px;
height: 200px;
margin: 0 auto;
}
}
Loading

0 comments on commit 64beff7

Please sign in to comment.