Inconsistent Design Across Browsers and Mobile Devices

[wedade1]

Select Topic Area

Question

Feature Area

Issues

Body

Hello,

I hope you’re doing well. I wanted to bring an issue to your attention regarding my website's design.

When I launch the site from Visual Studio to Safari, everything displays perfectly, with the design and sizing just as intended. However, when I check the website in Chrome or on mobile devices, I notice significant inconsistencies. Some elements appear either too large or too small, and the layout seems misaligned.

I've already included the following meta tag in my code to ensure proper scaling on mobile devices:

Could you look into this discrepancy and help me to ensure a consistent design across all browsers and devices?

Thank you for your support!

Best regards,
Wedade

Guidelines

• I have read the above statement and can confirm my post is relevant to the GitHub feature areas Issues and/or Projects.

[AESMatias]

Hello Wedade, the differents browsers have commonly different styles for certain HTML elements, so the final render is a little different amoung devices and browsers.

For a correct view on mobile and more large screens, do you need to apply the "mobile design" or "mobile design first" implementation, all in order to render the CSS specifications accordingly the different screen sizes.

I recommend you to add a normalize .css file, that would be useful if you want more consistency among different browsers, you can google some "normalize css" code, that would be useful too.

Lastly, i recommend to check if are you using relative or absolute definitions in your .css file on your website, for example, px is an absolute measure, whilst rem is an measure relative to the current device size on which the content is being rendered.

Good luck!

[wedade1]

Regarding the use of measurement units, I’ve primarily been using rem for scalability, but I’ll double-check to ensure I’m minimizing the use of px to improve responsiveness.

[AESMatias]

It's nothing, i hope that would help! You can let me know about the specific element you are facing issues with, and the code, unfortunately i cannot say anything further without it.

Best luck though!

[wedade1]

Thank you! Please can you check my code ? it's already in my repository : wedade.github.io
Index.html

[AESMatias]

Hello again, i have made a push request in your repo, just a little changes to make it more responsive.
Do you need to add the @media queries on your .css file, that would be solve your responsive design problem, make sure to modify the font sizes and other things in your HTML elements.

https://github.com/wedade1/wedade.github.io/pulls

[wedade1]

Yes please, I just accepted the pull.
Thank you very much !

[samus-aran]

Welcome to the GitHub Community, @wedade1 , we're happy you're here! You are more likely to get a useful response if you are posting your question(s) in the applicable category and are explicit about what your project entails--giving a few more details might help someone give you a nudge in the right direction. I've gone ahead and moved it for you. Good luck!

[wedade1]

Hello !
Thank you for moving my post! I’m currently working on my portfolio website and aiming to make it fully responsive across all devices. However, I’m struggling with the size of the homepage, specifically a theme video that contains my picture. No matter what I try, I can't seem to adjust it to look right on different screen sizes. I’ve also used media queries, but they don’t seem to be fixing the issue. Any suggestions on how to ensure the video fits well and scales properly across various devices would be greatly appreciated!