So I have a navbar defined in bootstrap 3, however I would like to change the size, color, and <li> elements when a user visits it on a mobile or tablet browser vs a desktop. What would be the best way to go about this? I thought about using media queries but I am not sure where to start.
If you want to customize this more for mobile jasny perform these plugins are very good for, I have implemented in my projects and work very well for the mobile "menu offcanvas"
jasny bootstrap offcanvas
Media query is a good way to fix your problem. The boostrap navbar default breakpoint seems to be at 768px. see on coderwall
#media (max-width: 768px) { "your modifications here" }
My way is.. 1.- detect iphone/ipad/android with jquery, 2.- Use custom media queries to target iphone, ipad. Later test in a device because using media queries only target on desktop not in a device or smartphone resolution.
Related
Hi I've got problem with responsive design because it's working in browser, when im changing browser size to small site is changing but when i'm going on site using mobile device or inspect element tool it's not changing. Here is demo of website: https://horrorfiles.htw.pl
I'm using tailwind css and react js, i made lots of projects using that and thats my first case.
I guess you need to read proper documentation and then apply the usual breakpoints for responsiveness here is the documentation of breakpoints and everything looks on good on your site.
enter link description here
I think the problem is you're using the breakpoint prefixes to target mobile devices instead of designing for mobile then using breakpoint to target larger screens. Tailwind's documentation has this: https://tailwindcss.com/docs/responsive-design.
I am fresh new to CSS in general and responsive design specially,
I had an old website which i successfully redesigned with CSS and everything is fine, when trying to make it responsive i just discovered media queries and i started with restyling the footer using :
#media screen and (max-width:720px){ etc ...}
That works ok and my footer is restyling well, my question is :
This looks fine in my mobile which is 720px width, but in the case of a mobile with for example 1080px width it will show the desktop version ? how to avoid that ?
I mean if i try with :
#media screen and (max-width:1280px){ etc ...}
To include high resolution mobiles, it will show the mobile version on desktop screen that are 1280px width ?
What is the correct usage, ? Thanks
Don’t worry about a device being mobile or desktop or whatever.
Media queries allow you to apply difference style sheets based on the window size.
If you have a media query for devices that are 720px wide or less and the design in that CSS works for screens that wide and another media query for devices that are wider that that, and the design works for devices that size, then everything is fine.
I'm using getbootstrap for building my website. According to my design, I don't want to show the portrait view of tablets. How can I eliminate this?
I just want iPad landscape and desktop normal, iPhone portrait and landscape. How can I eliminate all other views?
You will need to customise the screen width values under the section Media queries breakpoints in http://getbootstrap.com/customize/.
This will then generate one or more custom CSS files that you can add to your site.
You will of course have to specify the correct values for iPads and iPhones with or without Retina displays. This should help:
http://stephen.io/mediaqueries/
The bad news is that you may have to hack the CSS generated from getbootstrap.com in order to set the media breakpoints explicitly for Retina devices using -webkit-min-device-pixel-ratio: 2.
I have being tearing my hair out trying to get a fix for this, the site is built with Twitter Bootstrap and is responsive, and works fine on all devices apart from iPad & iPad mini in portrait where it is always wider that the devices screen.
I know that there is a problem on device rotation with iOS devices, but this is on page load in portrait.
Any advice would be great, I am not sure if it is a problem with Bootstrap or something I have done.
http://bodysgallen.ws-django.co.uk
you may need to make a new set of responsive CSS to fit that screen size.
EG you have something like this #media (max-width: 979px) & #media (min-width: 1200px). You might need to add another one in between to handle the size of the iPad on portrait.
I'm not sure if the problem is related specifically to iPads. Something odd is happening with your grid at a viewport of 769px - 945px (approx). It's not responding correctly.
If you check validation results for the page there are a number of errors which aren't too important but at the end there are two I would fix, an unclosed container div and a body tag that was already closed. http://bit.ly/11fKdhG
While these 2 errors aren't necessarily the cause of the problem, I think you want fix them first.
Hope this helps!
I'm looking to create a mobile version of our website. What's a good way to provide the best, most fully featured version.
We have HTML5 and CSS3 Website. Is any Converting is possible?
Thanks in advance...
There are several things to consider when converting your site, what size screens and devices are you going to support - just phones or pads too? Also what is the content / functionality of your site. If it's fairly static display sort of data then you may consider "Responsive Design" (lots of links if you google it). You modify your layout to handle the screen sizes. You could use Modernizr or something like that to determine what functionality the device has and determine how to skin / handle navigation, form data, etc. I don't think you'll find anything to just "port" your site (other than paying somebody else to do it)
I'm assuming you plan on having similar content on your mobile version of your website that you do on desktop version, if so you could use media queries to configure the styling of your site to best fit various mobile screen sizes, such as:
/* Media Queries
------------------------------------------------------------------------------*/
#media handheld and (max-width:480px),
screen and (max-device-width: 480px),
screen and (mx-width: 600px) {
/* then modify css for the small screen such as centering headers, setting inherit widths etc */
}