HTML and CSS

[big1oot]

Hello. I wrote an html code for a clone website, but I noticed that when executed with the browser, there is an issue. When the screen is reduced to a particular width, it begins to leave some elements out of the page. Can someone help me check what the issue is please?

[samueljaja00]

How do I help

…

On Mon, 5 Aug 2024, 12:57 pm big1oot, ***@***.***> wrote: Hello. I wrote an html code for a clone website, but I noticed that when executed with the browser, there is an issue. When the screen is reduced to a particular width, it begins to leave some elements out of the page. Can someone help me check what the issue is please? — Reply to this email directly, view it on GitHub <#1309>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AMICBU3NYU26QVSQYR5NYJ3ZP5SCNAVCNFSM6AAAAABMAETE6OVHI2DSMVQWIX3LMV43ERDJONRXK43TNFXW4OZXGAYTIMRWGQ> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[big1oot]

I don't know if it is possible for me to send you my code so you look through it and tell me where the problem lies. I'm kinda new to github, sorry.

[bhavishyaPlawat]

Hello. I wrote an html code for a clone website, but I noticed that when executed with the browser, there is an issue. When the screen is reduced to a particular width, it begins to leave some elements out of the page. Can someone help me check what the issue is please?

write a query pattern in css for the same , this happens coz you haven't told the website what to do when screen in small for example see my flipkart clone , the Nav bar gets changed when reduced to certain length mostly done for 3 screens ,laptop,tab and mobile

[big1oot]

I actually already used media query for the width, the query works, but there is still an issue i do not understand.

[bhavishyaPlawat]

maybe you are using pixelss frequenty for setting width and height ,try using vh,vw
else upload the code let me see and try to fix, maybe i can help

[big1oot]

oh... uhm okay, i will check that, thank you.

[big1oot]

Do i just paste the code here, or how do i do that please? Thank you.

[bhavishyaPlawat]

make new repository on github
or search from youtube else paste the code i'll check

[acquahinc]

Have you been able to sort it out?

[big1oot]

not yet please

[Akashgite1]

It sounds like you might be dealing with a responsive design issue. When elements are being cut off or not fitting properly within a reduced screen width, it’s often due to how CSS styles are being applied.

Here are a few common causes and solutions:

Fixed Widths: If elements have a fixed width (e.g., width: 600px), they might not fit well on smaller screens. Consider using relative units like percentages (width: 100%) or flexible layouts (e.g., using flexbox or grid).

Overflow: Check if any parent elements have overflow: hidden or overflow: auto, which might be clipping child elements. Ensure that your container elements can adapt to the size of their content.

Media Queries: Make sure you’re using media queries to adjust styles for different screen sizes. For example:

@media (max-width: 768px) {
.element {
width: 100%;
font-size: smaller;
}
}

Box Model: Ensure padding and borders are properly accounted for. Sometimes, the total width of an element might exceed its container’s width due to padding or borders.

Viewport Meta Tag: If you’re working with responsive design, make sure you have the viewport meta tag in your HTML :
html

If you can provide more details or a snippet of your code, I might be able to offer more specific advice.

[big1oot]

omg, thank you so much, it worked. The issue was with the fixed width that i set. Thank you again. Have agreat day.

[Suryakanta311]

Use object-fit property in css and see what happen

[Suryakanta311]

Hello. I wrote an html code for a clone website, but I noticed that when executed with the browser, there is an issue. When the screen is reduced to a particular width, it begins to leave some elements out of the page. Can someone help me check what the issue is please?

Bro uss vw insted of px