• 0

Responsive layout - any suggestions?

Asked by +Nik Louch,

 Share

Question

Grand Master

+Nik Louch Subscriber²

Posted
  • Subscriber²
Posted

I've thrown together a little responsive layout, and wondered if any of the better developers here could take a look, please?  It's not about design, just about "Is it working?  How can it be better?".  It's meant to:

 

Be centred on wider resolutions

Navigation take a 2nd line on lower resolutions (<750)

Navigation become iPhone style on devices

Sidebar to the right on wider resolutions

Sidebar below on lower resolutions (<750)

Sidebar below on devices

 

http://niklouch.com/

 

Thanks in advance

Link to comment
https://www.neowin.net/forum/topic/1291810-responsive-layout-any-suggestions/
Share on other sites

7 answers to this question

Recommended Posts

  • 0
Veteran

ZakO

Posted
Posted

On low-resolution devices when the menu wraps to two lines it overlays the first paragraph of text. Also, while the approach you've taken is fine for small projects I would recommend looking at mobile first (with min-width media queries) for larger ones, it generally allows for cleaner styles (i.e. not a bunch of undoing styles like float: none). 

  • 0
Grand Master

+Nik Louch Subscriber²

Posted
  • Author
  • Subscriber²
Posted
1 minute ago, ZakO said:

On low-resolution devices when the menu wraps to two lines it overlays the first paragraph of text. Also, while the approach you've taken is fine for small projects I would recommend looking at mobile first (with min-width media queries) for larger ones, it generally allows for cleaner styles (i.e. not a bunch of undoing styles like float: none). 

Thank you.  Can I ask in what browser you are seeing the overlap, as I'm not in Chrome, Safari, IE 8, 10 (mobile and desktop)?

 

I've just started reading on mobile first - interesting.  But yes, this is for my personal blog, which will basically have a readership of one most likely ;)

  • 0
Veteran

ZakO

Posted
Posted (edited)
34 minutes ago, Nik L said:

Thank you.  Can I ask in what browser you are seeing the overlap, as I'm not in Chrome, Safari, IE 8, 10 (mobile and desktop)?

Actually, that's my mistake, I only tested briefly on a resized chrome desktop, I didn't notice the max-device-width media query in your stylesheet adjusting the menu on small devices so it probably only breaks on a desktop browser sized small.

 

34 minutes ago, Nik L said:

I've just started reading on mobile first - interesting.  But yes, this is for my personal blog, which will basically have a readership of one most likely ;)

Yeah, that's understandable :p. It's definitely worth looking at if/when you're going to do larger responsive sites.

 

This topic is now closed to further replies.
 Share
Go to question listing

  • Posts

    • draw.io Desktop 30.2.4

      By Fleet Command · Posted

      The actual download size is ~130–180 MB, not 100 MB.
    • What are you listening to?

      By cork1958 · Posted

      Slight change of pace for me! Gunnar & the Grizzly Boys - Standard American (Official)  
    • draw.io Desktop 30.2.4

      By Copernic · Posted

      draw.io Desktop 30.2.4 by Razvan Serea draw.io desktop is a downloadable security-first diagramming application that runs on Windows, MacOS and Linux. Creating diagrams in the desktop app doesn’t need an internet connection. This is useful when you are disconnected or when you must create diagrams in a highly secure environment, where data protection is of the utmost importance. When you use the draw.io desktop app, your diagrams will be stored on your local device. Because this is a stand-alone application, also designed to run offline, there are no interfaces to cloud storage platforms available. Of course, you can still store your diagrams in folders that are synchronised to your cloud storage if you wish. Easy-to-use diagram editor The draw.io apps work just like the office and drawing tools you are used to using. Drag and drop shapes from the shape libraries and drag to draw connectors between them. Drag connectors to add waypoints and set a precise shape and position, or let them reroute automatically. Double click and start typing to add a label to anything. Create tables and swimlane flows with a familiar tool. Style shapes and connectors with customisable palettes, sketch options, fonts and text formatting tools. Search for shapes, including in open-source icon libraries. Use our vast libraries of shapes and templates, organised into logical categories, to create a range of diagrams and infographics. Generate diagrams from text descriptions using our smart templates. Diagram faster with keyboard shortcuts. draw.io Desktop 30.2.4 changelog: Uses electron 42.4.1 Updates to draw.io core 30.2.4. Download: draw.io 64-bit | Standalone ~100.0 MB (Open Source) Download: draw.io 32-bit | ARM64 | ARM64 Standalone Links: draw.io Home Page | Project page @GitHub | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Microsoft will soon allow some users to block Copilot from analyzing their Office files

      By Usama Jawad96 · Posted

      Microsoft will soon allow some users to block Copilot from analyzing their Office files by Usama Jawad Microsoft Purview is a pretty useful data governance, security, and management service that allows customers to gain enhanced visibility and control over their content. It's meant for commercial customers, such as organizations that are storing data at scale. As AI continues to expand and infiltrate every corner of a firm, many are a bit conscious about the technology gaining access to their confidential data. Microsoft is now making a configuration change that will allow such customers to rest easy. Right now, users within an organization have the option to apply Purview sensitivity labels (when available) to secure certain files and label them as such. For example, if you apply the "Confidential" label on an Excel file, the file will be encrypted, and a "confidential" watermark will be applied to it. So, if this file is shared with anyone, they are aware that its access is supposed to be restricted. Up until now, Microsoft was allowing some connected experiences, like its AI services, to analyze files, regardless of their sensitivity label. This is of major concern to most organizations, as a recent example highlighted how confidential emails with data loss prevention (DLP) policies like privacy labels were being uploaded to Copilot for analysis. As such, Microsoft is updating an existing Purview data label sensitivity setting that prevents "some connected experiences that analyze content", from being blocked completely from doing this. The label isn't changing, but the blocking is now being enforced across all connected services (including Copilot and other AI tools), and now extends to Microsoft Word, Excel, and PowerPoint. Files with the label applied already will get this enhancement automatically too once it becomes available. Microsoft has urged IT admins to inform their respective helpdesk and compliance teams, update internal documentation, and review sensitivity labels to ensure that they meet their respective compliance needs. This change is tagged as MC1297982 in the Message Center. General availability is scheduled to begin in a phased manner soon and will complete by the end of next month. That said, it is important to note that this only applies to commercial customers who have a license that allows them to use Purview.
    • Acronyms....

      By Mindovermaster · Posted

      llamas are unruly going haywire in New Guinea.

  • Recent Achievements

    • Week One Done
      Eurosoft10 earned a badge
      Week One Done
    • One Month Later
      Eurosoft10 earned a badge
      One Month Later
    • One Year In
      Skeet Campbell earned a badge
      One Year In
    • One Month Later
      Sharbel earned a badge
      One Month Later
    • First Post
      BizSAR earned a badge
      First Post

  • Popular Contributors

    1. 1
      +primortal
      589
    2. 2
      +Edouard
      190
    3. 3
      Michael Scrip
      76
    4. 4
      PsYcHoKiLLa
      75
    5. 5
      neufuse
      72
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!