a lot of problems hahaha

so why @media does not work in the img url i designed it from screen device first@jen67

@ousey-ousey

I tried tweaking your codes and changing some things and it looked a little bit better with these changes. You can go through them and check if it helps your design look better. Also for media queries, You can check out this links to learn more about responsive design.

1. MDN docs
2. W3schools
3. Kelvin Powell, Responsive web design

These are some code snippets I tried

Desktop View Adjustments

/* Added padding for breathing space in .c-1 */
.c-1 {
    padding: 2rem;
}

/* Removed left padding from paragraphs */
#p-1, #p-2, #p-3, #p-4 {
    padding: 20px 0 20px 0;
}

/* Adjusted font size for paragraphs */
#pt-1, #pt-2, #pt-3, #pt-4 {
    font-size: 16px;
}

/* Adjusted width for hr */
hr {
    width: 100%;
}

Mobile View Adjustments

/* Adjusted background image styling in .b-img img */
.b-img img {
    background-size: cover;
    width: 100%;
    height: 30vh;
    object-fit: none;
}

/* Reduced width of .c-1 and added automatic margins for centering */
.c-1 {
    width: 90%;
    margin: 0 auto;
}

/* Adjusted padding for .c-1 in mobile view */
.c-1 {
    padding: 1rem;
}

/* Adjusted font size and positioning for #head */
#head {
    font-size: 2rem;
    left: 0;
}

/* Adjusted styling for list items in .c-1 ul li */
.c-1 ul li {
    padding: 1rem 0;
    font-size: 1rem;
    margin-right: 0;
    display: block;
}

/* Adjusted positioning for li::before in mobile view */
.c-1 ul li::before {
    right: 0;
}

/* Adjusted font size for paragraphs in mobile view */
#pt-1, #pt-2, #pt-3, #pt-4 {
    font-size: 1rem;
}

Hope these edits simplify things a bit! Great job! 👏

I put it out as when i click the p appear it go over the title @danielmrz-dev