I started working on Mobile First Responsive Design. In mobile, there wont be any sidebar but sidebar is required on desktop so I worked on basic things and then in media query for mobile, hidden that sidebar. Then I needed to make sidebar appear on desktop version of media query.
My question is - How I would have worked on it ?
For the starter, i would like to prefer some basic ideas to build a responsive website:-
Use Layout Flexible
Donot Use tables
Use Media Queries
Use Mobile Viewport Meta Tag
A basic example for a responsive website is that suppose you have a website with content and sidebar which is floated with 70% and 30% width, in mobile or shrink screens, the content panel and sidebar will be width 100% and float none...
That's a simple example for a responsive website...
Rest you can use framework for responsive websites like Twitter Bootstrap or Kendo UI and etc...
Related
enter image description here
I make this web app using react.js and I tried very much to do Responsive for mobile devices but I couldn't, any one solve this problem please.
I used useMediaQuery from material ui which helps very much in creating responsive site.
Here is the documentation for it.
After then for displaying responsive components
You can create new components that are fit to that window size
You can use states for toggling for the different window sizes
And then you can import them as you want.
Just discovered this code and implementation of lightbox2 and added the needed code to some of my webpages.
Looks very good o desktop and also on tablet but I don't like the lightbox in mobile view.
The pictures that are shown on mobile are smaller than the 'normal' responsive view that I get when not using lightbox2.
So my question is in the title: How can I disable the lightbox on mobile?
Regards Arno
Unfortunately this is not possible at this time. The Lightbox script on load will attach event handlers to the target images.
To get around this, you can use different markup on mobile and show hide the content with CSS media queries.
I'm developing a MEAN application that needs to look good on mobile browsers. At first I was trying and failing to use Bootstrap to make this responsive, as I didn't realize Angular was clashing on the Bootstrap and JQuery JS libraries that Bootstrap depended on.
So I found Angular-UI project on GitHub...sorry for no link but I don't have enough reputation.
I'm trying to get the Collapse Navbar to be responsive on a mobile device. (responsive meaning it adjusts to the "hamburger menu" and the names of the links no longer appear in the menu)
I'm failing to get this to work within the bounds of my Node application.
To isolate the issue, I took the HTML and JS from the plunker referenced by the Angular-UI Bootstrap example (which, by the way also appears responsive to small displays when viewed from a iPhone or Samsung Edge) and made a stripped down Node app, which basically returns what is in the Plnkr example, but that still doesn't appear responsive when viewed from a mobile phone browser (I tested mobile Chrome, Safari, and Firefox)
See screenshot of sample app on OpenShift cloud:
http://angbootstrapnotresponsive-215api.rhcloud.com/assets/
This sample is not responsive
Note: If I view my sample in "responsive" mode in the dev tools, or simply resize my desktop browser window, the menu links fold up into that hamburger menu as desired. Only when I try to use the mobile browser from either iPhone 6 or Samsung Edge this responsive Navbar isn't responsive.
thanks in advance for any ideas!
I am creating a responsive web app using Angular and ui-router. I need different states to be loaded depending on what size a user's browser window is via CSS media queries.
e.g. For the main page state, the nav bar will contain different elements depending on what media query is active:
Mobile browser (320px - 480px) the nav bar contains 2 buttons (search & icon logo)
Tablet browser (480px - 770px) the nav bar contains 4 buttons (search, full logo, user profile, settings/options link)
Desktop browser (770px and 1500px) the nav bar contains 6 buttons (full logo, search, upload, user profile, settings/options, log out/in)
So I know I can just load all 6 buttons and just hide certain ones for the mobile and tablet browsers via CSS styles but I am seeking a more elegant approach. I want to load in only what is needed for each window width (media query). Is there a way to do this with Angular and ui-router?
I was lucky enough that a friend showed me this article https://medium.com/opinionated-angularjs/adaptive-web-design-and-angularjs-78e0837fa92 which basically will allow me to do what I need but not by media queries but by feature detection via Modernizr.
Here is the Github project https://github.com/ghengeveld/angular-adaptive-templating
I want to make a javascript image gallery
(with 6 thumbnails in a row and as many rows as fit the page.
clicking the thumbnails will bring up a popup box with images and a video)
At the bottom of the page there is a numbered pagination.
However, I would like to make it so that on a mobile platform (android/iphone)
the user can paginate by swiping the pages to go forward or backward.
How do I adjust the pagination for a mobile platform?
Should I use a specific crossplatform tool like sencha to make this gallery?
Have you thought about using JQuery Mobile ?
http://jquerymobile.com/