dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: Website not fitting and working on mobile devices

  1. #1
    Join Date
    Nov 2013
    Posts
    3

    Website not fitting and working on mobile devices

    Hi there,
    im new into making websites, so my first sample "www.belsma.eu" is not working and fitting on mobile devices.Can anybody help me pls?
    Gr Vladimir

  2. #2
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    The most likely solution would be to create a new CSS file that will be active only for screen resolutions that a mobile device would have listed somewhere in your <head>. Unless you're going to change the colours depending on the resolution, I prefer to have a master file that is responsible for only displaying the colours, font styles, etc... . This way, the other CSS files are only responsible for adjusting font sizes and positions of elements on the page. For example:

    HTML Code:
    <link rel = "stylesheet" type = "text/css" href = "master.css" />
    <link rel = "stylesheet" type = "text/css" href = "mobile.css" media = "screen and (max-width: 700px") />
    You may need to adjust the max-width depending on the mobile device.

  3. #3
    Join Date
    Mar 2011
    Posts
    1,158
    You should learn about "responsive design", which is a way of making pages that automatically adjust to the user's device. Your code makes no adjustment for screen size except for the 'viewport' <meta> tag. All of your images have a fixed size in pixels. Almost the entire structure of the page is fixed. If you want to make one website for all devices, then using responsive design is the solution. There are many online tutorials for responsive design to help you.

    Of course, not every design can be easily adapted to the responsive design approach. It may simply not be practical to provide all of the features you're using on a mobile device with a limited screen size. It might be better to design a separate site for mobile users.

  4. #4
    Join Date
    Mar 2013
    Location
    Great Falls, MT
    Posts
    27
    I would try something like

    @media (max-width:468px) {
    body{max-width: 1200px; width:100%;}
    }

    Adjust max-width and width values accordingly

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles