/    Sign up×
Community /Pin to ProfileBookmark

Mobile version bug

Hi , I am in the middle of creating my portfolio . But I have a weird bug on the mobile version it’s pushed to the side and off the screen. What is interesting is that on my desktop looks good when it the mobile size. This happens only in the coder section. Do you guys have any idea why ?

My site: https://brave-sinoussi-964598.netlify.com/
The code: https://github.com/CodyHiII/My-Portfolio-Site

This is the bug:
[upl-image-preview url=https://www.webdeveloper.com/assets/files/2019-05-31/1559308739-798655-61407105-3282947721745220-2023303554923495424-n.jpeg]

to post a comment
CSS

5 Comments(s)

Copy linkTweet thisAlerts:
@VITSUSAJun 01.2019 — There may be so many reasons, so firstly you should discuss with your developer, otherwise you can hire a mobile app development company to resolve this issue.
Copy linkTweet thisAlerts:
@codyhillauthorJun 01.2019 — @VITSUSA#1604253 I am the developer
Copy linkTweet thisAlerts:
@PeterPan_321Jun 06.2019 — Well as already stated, there are many possible reasons. But I've recently been bringing some of my "legacy" sites into the "modern" age of responsive design, and here are two of the biggest things I've needed to do. First, there is an important meta tag you need in the <head> area...

<meta name="viewport" content="width=device-width,initial-scale=1"/>

This tells mobile browsers to try to fit everything onto the mobile screen and fill it as much as possible. However, most people do this meta this not realizing that if you don't make the rest of your page and page elements fully responsive, you may end up with a worse situation (like what you described. So some of the obvious things are...

  • - Are you using responsive text in your CSS (for example, text sizes in REMs rather than ems, pixels, or ems).

  • - Are all your box widths specified in percentages rather than pixels or units that can't change with the page.

  • - Are all your image sizes responsive! No HTML widths or heights! All images controlled by CSS, with widths specified as percentage and heights set to 'auto'. Also, consider 'float' left or right.


  • I could go one... for example in you BODY CSS...

    -webkit-text-size-adjust: 100%; /* **see below */
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: 100%;


    Thosehelp many mobile browsers maintain text size during orientation changes, (see http://www.saintsatplay.com/blog/2015-04-25-preventing-text-scaling-on-iphone-landscape-orientation-change ). It may not be your current problem, but it could save you some headaches trying to handle all that with media queries (which you'll need sooner or later too)

    Good luck! There have been times, while rebuilding pages with problems like yours on mobile devices, where I had to start a new page, adding in one element or block of content at a time and testing until the "problem child" revealed itself.
    Copy linkTweet thisAlerts:
    @codyhillauthorJun 06.2019 — @PeterPan_321#1604401 Thank for the comment , I fixed the issue , I am sorry that I did not updated the post as I should have done. I used grid , and I had
    grid-template-column: repeat (autofit, minmax(19rem 1fr));
    I figure that rem or fr are the issue so what I did I just changed 19rem to 80vw . This completely ruined the meaning of the first line as it was not responsive anymore but I was fine with it as I changed it only for mobile screen size . I don't know how good of a fix it is.... But if it work it works and for me is good enough for now :D
    Copy linkTweet thisAlerts:
    @PeterPan_321Jul 11.2019 — @RaulRogojan#1604409

    Though an old post, I had to chuckle about the "good enough for now". How true right? I have sites that I am re-coding a little at a time, with some pages first started in the year 2001 (no joke!). Most have been updated countless times, with some needing to be totally overhauled. I've decided that maintaining web sites, especially ones that have long visitor history, is like painting major suspension bridges. By the time you get from one end to the other, its time to restart where you began. LOL!
    ×

    Success!

    Help @codyhill spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 3.28,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,

    tipper: Anonymous,
    tipped: article
    amount: 10 SATS,
    )...