Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 5 of 5
Like Tree2Likes
  • 2 Post By TheGAME1264

Thread: Problems with Page Layouts on mobile devices

  1. #1
    Junior Member
    Join Date
    Apr 2015
    Posts
    2
    Member #
    49259

    Problems with Page Layouts on mobile devices

    Hi,

    I am having a real problem getting my website to look the same on mobile devices as it does on a PC browser.

    The navbar of my site should go right across the top in the same darker colour, with no gap in between the white of the button and the highlighted page and also the navbar and the main body of the page should be centrally aligned like the banner across the top. I just can't seem to get it to work! Please help!

    I have made the website entirely from scratch in notepad++ and obviously I have tested it so it works on Chrome, IE, Firefox and Safari on PC, but I can't get it to work properly on mobile! It has to be said I am in no way an expert at HTML and CSS and especially not anything else like Js!

    I have added a screenshot of it from a iPad, and here is the link to it on PC: Chapel Row Cottages - Welcome

    photo.jpg

    Thanks in advance for any help and advice I can get!

  2.  

  3. #2
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,483
    Member #
    425
    Liked
    2783 times
    The short answer is "you don't." The problem with mobile devices is that they have much smaller screen areas, which is the purpose of responsive design; to deal with those smaller screen areas and fit things into them. In particular, when you put a cell phone in portrait mode, you only have 320 pixels of space to work with. Each of your two graphics at the top are wider than that by themselves, so they'd need to be dealt with.

    You'll need to use CSS media queries to create alternate layouts for the smaller devices. CSS Tricks has done a really good job of explaining the general idea here:

    https://css-tricks.com/css-media-queries/
    Vapr_Arts and peachy146 like this.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  4. #3
    Banned
    Join Date
    Mar 2015
    Posts
    21
    Member #
    48461
    I think you can use the HTML to edit them. And it is very much simplified compared to CSS

  5. #4
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Idk how anything could be any more simpler than CSS. Or how you could style a page easier without it.


    Sent from my iPhone using Tapatalk

  6. #5
    Junior Member
    Join Date
    Apr 2015
    Posts
    2
    Member #
    49259
    Thank you very much for your help, I will have a look at the CSS media queries stuff because that is something I have been wanting to teach myself for a while and get my head round that!

    Thanks, for your help!


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:25 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com