I am building a website based on wordpress theme which should be responsive. But if I resize the browser window and make it smaller, the menu just hides somewhere under the header. Is there anyone capable of fixing that?
The Website
you can use bootstrap framework for responsive theme
work with bootstrap is easy
bootstrap
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 trying to make a webpage with HTML,css and jquery. But the problem is that the webpage is not working properly on phone or other small screen devices. Here is the link for the page.
The solution is quite simple. To have responsive layouts, use percentages for width/height and margins rather than pixels (px) so that they can auto-resize when the screen size changes. To make your bottom bike image look responsive, use width: 95% and height: 95% (or whatever other percentage you'd like). For the Bikerz icon, try using margin: Google Chrome's inspect feature is very useful so make sure to test it out on it. Simply right click on the web page and click Inspect. Once you are there you will see an icon left of the "Elements" section. When you click that, you can view your web page layout under different resolutions.
Either you have to write custom css to support mobile device or I will recommend to use Bootstrap framework in order make compatible your site on mobile. Bootstrap will allow you to developing responsive, mobile first projects on the web.
If you are going to use css then, i will also recommend you to validate your css support at different browser and mobile platform through canIuse.
I'm currently trying to use CSS media queries to optimise my website for mobile view, and am using Google Chrome with an extension to resize the viewport on my desktop to adjust my content for mobile.
The problem I'm having is when i'm designing and changing on my laptop at the mobile phone resolution, everything works fine (see first picture) but when I actually load the website on my mobile, I'm not getting the same view as what I'm getting from the laptop (see second picture).
I've used
<meta name="viewport" content="width=device-width, initial-scale=1">
to set my width for mobile
I know the font is different because it's a third party i've installed onto my laptop so thats not the problem.
Just wondering if theres any easier way of actually creating responsive views for mobile such as using applications like Phonegap or if anyone can give me tips on how to properly create responsive content for mobile.
Thanks in advance
EDIT:
The second picture is larger because it was as a screenshot from my mobile phone, the screen sizes aren't different.
I suggest watching the New Boston's Responsive Web Design Playlist:
He will teach you the important basic concept of a responsive design using percentage and also creating your own custom menu or button in a responsive mobile version(that makes it almost like a mobile app in a browser).
https://www.youtube.com/watch?v=yWgl3xXVlHI&list=PL6gx4Cwl9DGBaTsb1nse1UU48d_q7glGT
You should consider using bootstrap. It is a mobile first front-end framework for faster and easier web development
http://getbootstrap.com
#John Appleseed
use the Inspector
"Toggle device mode" or "Ctrl + Shift + M"
time you try your web site
and not just resize the page
I don't know your CSS but have a look at this
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I have a website http://www.vinjerac.com which has an image slider.
The complete site is responsive, but the slider content does not fit the viewport in mobile devices and the website looks distorted.
Can you please suggest a solution for the same.
Thanks
I did have a look at your site, and found you are using bootstrap for the responsiveness. And also a plugin for the slider.
Bootstrap is not designed to work with other plugins.
One workaround would be use a bootstrap slider which is also called carosel instead of the plugin that you are using you find the bootstrap carosel here
Please let me know if you need any other information.
I am bit of a noob when it comes to bootstrap but what I am trying to do is have a side menu when in desktop or tablet mode and a fixed top navbar in mobile view.
I am reverse engineering a simple theme http://startbootstrap.com/template-overviews/sb-admin/
I have removed everything from the bar I just can't get it to dissapear in non mobile resolutions. I'm sure I am being stupid, thank you for any advice.
You can use Bootstrap's responsive utilities
With these you can give the navbar a class of visible-xs which would only show up on devices with a resolution less than 768px.