Skip to content
This repository has been archived by the owner on Sep 7, 2024. It is now read-only.

fixed footer responsive issue #838

Closed
wants to merge 3 commits into from
Closed

fixed footer responsive issue #838

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a0e9a8a
fixed footer responsive issue
aamishhussain23 Jan 13, 2024
65c5095
Update Footer.jsx
aamishhussain23 Jan 13, 2024
0ad98e1
fixed syntax
aamishhussain23 Jan 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 8 additions & 5 deletions src/components/layout/Footer.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,15 @@ import clsxm from '@/lib/utils';
import HeaderLink from '@/components/links/HeaderLink';
import UnstyledLink from '@/components/links/UnstyledLink';

// importing css file of footer
import styles from '../../styles/footer.module.css';

const Footer = () => {
return (
<footer className='bg-base-200 py-24 text-content' id='footer'>
<div className='layout flex flex-col gap-4'>
<div className='mx-auto grid w-full grid-cols-2 justify-between gap-x-0 gap-y-4 py-4 sm:gap-x-4 md:grid-cols-4'>
<div>
<div className={`{mx-auto grid w-full grid-cols-2 justify-between gap-x-0 gap-y-4 py-4 sm:gap-x-4 md:grid-cols-4 ${styles.media_center}`}>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The template literal syntax is incorrect. It should be enclosed in backticks and include a dollar sign and curly braces for the expression.

- <div className={`{mx-auto grid w-full grid-cols-2 justify-between gap-x-0 gap-y-4 py-4 sm:gap-x-4 md:grid-cols-4 ${styles.media_center}`}>
+ <div className={`${mx-auto grid w-full grid-cols-2 justify-between gap-x-0 gap-y-4 py-4 sm:gap-x-4 md:grid-cols-4 ${styles.media_center}`}>
Committable suggestion

❗ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation.

Suggested change
<div className={`{mx-auto grid w-full grid-cols-2 justify-between gap-x-0 gap-y-4 py-4 sm:gap-x-4 md:grid-cols-4 ${styles.media_center}`}>
<div className={`${mx-auto grid w-full grid-cols-2 justify-between gap-x-0 gap-y-4 py-4 sm:gap-x-4 md:grid-cols-4 ${styles.media_center}`}>

<div className={styles.margin_5px}>
<p className='h4 w-fit border-b-4 border-primary pb-1 text-gray-50'>
Organization
</p>
Expand All @@ -33,7 +36,7 @@ const Footer = () => {
))}
</ul>
</div>
<div>
<div className={styles.margin_5px}>
<p className='h4 w-fit border-b-4 border-primary pb-1 text-gray-50'>
Community
</p>
Expand All @@ -48,7 +51,7 @@ const Footer = () => {
</ul>
</div>

<div>
<div className={styles.margin_5px}>
<p className='h4 w-fit border-b-4 border-primary pb-1 text-gray-50'>
Socials
</p>
Expand All @@ -61,7 +64,7 @@ const Footer = () => {
</ul>
</div>

<div>
<div className={styles.margin_5px}>
<p className='h4 w-fit border-b-4 border-primary pb-1 text-gray-50'>
Contact
</p>
Expand Down
9 changes: 9 additions & 0 deletions src/styles/footer.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
@media (max-width: 800px){
.media_center{
display: flex;
flex-wrap: wrap;
}
.margin_5px{
margin: 0px 5px;
}
}