Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Dec 2018
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Responsive Issue

    Hello all programmers,



    I am learning and creating a website. I just came across with this following issue and cannot understand what is wrong:


    I have added the media queries to make the site responsive and review the site using Chrome-> Inspect elements and change screen resolution to see if it is responsive or not. All seems to work. But when I actually open my site on my mobile, there are some issues with the design, etc last section "Contact" is sticked to left. It should be in center. I am not sure what is wrong. Could you please check the site and identify what is wrong. My site is : http://creative-sites.ga


    Its not an actual company, all is just dummy to practice.

    Thank you for helping.

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,910
    Thanks
    36
    Thanked 1,057 Times in 1,053 Posts
    I used an S7 and things look right (centered) on firefox this phone
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,273
    Thanks
    4
    Thanked 476 Times in 464 Posts
    It's utterly broken in every DESKTOP for me here, but that's because you went and declared everything in pixels and I'm a non-standard font metric user. This is why you should be thinking in EM.

    ... and even then your breakpoints should be based on the needs of the content, NOT some arbitrary screen size.

    Basically whoever told you it's ok to do this:

    font-size: 20px;

    or this:

    @media screen and (max-width: 400px) {

    or even this:

    min-height: 475px;

    Probably was not qualified to tell you how to build a website.

    The fixed header and footer also REALLY make the page small screen unfriendly. Have you seen what that does in portrait on a phone? Turns the page into "content? What content?"

    The handful of semantic faux-pas not helping matters either... like the multiple H1 without SECTION, presentational images in the markup where they have no business being, comment placements that could trip rendering bugs (and would/should be highly redundant to a decent id/class naming scheme), double breaks doing margin's job, incomplete form, DIV doing FORM and FIELDSET's job, silly/pointless HEADER tag, etc, etc, etc.

    Though if I were to take a guess, I'd suspect the strange use of inline-flex on #secA for what should probably be inline-block children mated to the lack of widths is at fault. Inline-flex can behave an awful lot like floats on subsequent siblings in the code, which could be riding #contact up and/or over it. Thing is since you seem to want normal flex behavior, why did you use inline-flex instead of just flex?

    NOT that I'd use flex for that since you have no equal-height backgrounds on those sections -- again leaving the outer div alone and giving the inner div.services inline-block would net you the same effect with a fraction the headaches, especially if you bother setting the widths on them.

    Oh and your charset META should be before any CDATA bearing elements like TITLE. If it's after you're basically forcing the browser to restart parsing the page from the beginning when it hits the META... and really if you need that X-UA nonsense there's something horrifyingly wrong with your code. You shouldn't be having to tell IE 10/later to behave as ... themselves. That UA exists to tell newer IE to behave like older ones, or to override if you've been "compatibility listed". No new website should ever have a legitimate reason to declare X-UA as "edge".

    -- edit -- and your stylesheet LINK has no MEDIA attribute saying what your layout is FOR. Pretty sure your screen media layout is just going to waste ink for "print", wasting bandwidth and possibly hindering accessibility for speech, braille, etc. At minimum you should have media="screen" on that. I declare "screen,projection,tv" for maximum compatibility, even if HTML 5's validation service *****es about it. Really media targets should be none of the markup specification's business.
    Last edited by deathshadow; Dec 29th, 2018 at 04:12 AM.
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •