[Support request] separate website sections for mobile devices

[david]

Hi,
Instead of designing a website using mobile first design, would it be reasonable to design a website with 2 sub sections one for desktop and laptop and the second for mobile devices(http:/site.com/big-screen/, http:/site.com/mobile/ ). Seems this may be easier than dealing with media queries and screen size breakpoints. Is this a reasonable alternative to mobile first design?
Thanks

[David]

Hi there,

In modern responsive web design its not a good practice to display different or duplicate content for different device sizes. Search Engines ‘may’ penalise you for it – and it just adds more code that needs to be parsed by the browser.

Is there any specific layout issue you’re having ? Happy to take a look at the site and provide some help with that.

[david]

Hi David, been working on (my client’s) desktop first (’cause I had deadlines, and it was easier), so now I have to deal with getting this to appear on small screens – appreciate your input / advice.
Thanks

[David]

Ooh – thats gonna take some unpicking – this should get you 90% of the way there:

@media(max-width: 768px) {

  .grid,
  .grid .bot-name,
  .grid .family-synonym,
  .grid .eng-arb,
  .grid .heb-comnts,
  .grid .lifefrm-hbtat,
  .grid .btns,
  .grid .flora-online,
  .grid label,
  .grid>div:not(.carousel),
  .grid>div:not(.carousel)>div,
  .carousel-inner .carousel-item img,
  .entry-content .comp-grid {
    display: block !important;
    width: auto;
    max-width: unset;
    margin: unset;
    padding: 10px;
    max-height: unset;
    height: auto;
  }

  .grid>div label {
    padding-right: 0 !important;
  }

  .grid div#carouselExampleControls.pic.carousel.slide {
    width: 100%;
    height: auto;
  }
}

[david]

Wow!
Thanks for your time and sharing your knowledge. Would never have arrived at this on my own – no matter how many hours I spent.
Looks ok, on mobile portrait it collapses into one column, but landscape sticks to the desktop layout – not ideal. Do I change the grid and add a media query for landscape?
Another thing on desktop layout I have an off canvas panel, on mobile view I’d like the icon (or text) for the off canvas panel to appear next to the hamburger menu icon, and clicking it would open the off canvas panel, same as clicking menu opens dropdown menu.
Again thanks for taking the time

[David]

In the CSS above you can change the @media(max-width: 768px) {

Try increasing the value to 1024px.

Can you provide a login to the site ? you can share the details in the private information field.

[david]

Thanks for your help

[David]

Just to be clear for mobile:

1. There will be a single Hamburger menu icon.
2. Do you want the primary menu to be displayed with your search filters in the Off Canvas Panel?

[Author]

Posts