I have a navigation bar, an example of which is available here: http://fiddle.jshell.net/4uq6y5fa.
This displays as expected when all the elements fit on the screen, but if I resize the window, bits of the menu start disappearing. How do I fix this?
Use CSS media queries:
#media only screen (//defined for particular width)
{
//code of nav bar and search box
}
e.g.
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
Alternatively, you can define widths and heights in percentages(relatively), using em instead of pixels.
I don't really get what your point is, do you want to make the menu responsive or do you want to know what the problem is?
As for making it responsive, use media queries.
W3schools, The #media rule is used to define different style rules for different media types/devices.
So for example you make your width 100% for the screen size of 1920x1080 and 50% for the size of 1024x720. So your nav will "jump" to the 50% when someone resizes the website.
Related
I have a menu that comes out on click, and the design of the font is very large, so when the screen height is reduced some of the text gets hidden. Is there a way to decrease font size for only when the height is reduced? not the width? Using a media query for height kind of messes with the mobile font size.
Is there another method that I'm not thinking of the fix this issue?
First screenshot is of the nav when the height reduced, you can see the text becomes squashed.
This second image is how the nav looks at full height. I want it to keep this spacing
You can use media query like this:
#media (max-height: 600px) and (min-width: 1024px) {
/* Styles */
}
You can play with max and min properties, according to the sizes you are looking for.
You can achieve that by using vh value for font size.
h1{
fontsize: 10vh;
}
We're having an issue with the mobile menu on our Wordpress driven website.
Problem:
In small viewport sizes, the carats used to expand the submenus don't show. The carats appear to be there and based on the styles are white but don't show through background. I've tried a variety of different fixes including adding "!important" to various styles without success.
Here's a screencast repro'ing the problem.
https://www.screencast.com/t/ZbZXTegLCWa
You can also repro it by viewing the site in a browser and adjusting viewport size to 440px.
https://www.windworkssailing.com
Thank you for your input!
You have multiple viewports where these menu-arrows are not visible, because the navigation menu's width is to large.
Following viewports are affected:
max-width: 1000px
max-width: 768px
max-width: 600px
Search for those media queries and for the following css element nav.mobile_menu > ul
Changing the width property to auto should fix the problem.
example:
#media only screen and (max-width:768px) {
nav.mobile_menu > ul {
width: auto;
}
}
But keep in mind, that you have to change the css code at three positions since three viewports are affected.
I want to define a global width for all of my pages (e.g. using a wrapper, ...). If the browser is resized below this pre-defined minimum value, the scroll bar should appear and a further resizing of the images/text or splitting up a navigation bar into two horizontal lines, is not done.
Any html/CSS code is welcome.
Thanks
You can use a media query css for the same::
EG::
#media screen and (min-width: 320px) and (max-width: 767px) {
.wrapper {overflow: scroll;}
}
Hello I am trying to create a responsive layout. I want the buttons I have created to be fit somewhere on the left side. But when I load it on my mobile phone (sideways) it does not show all the buttons as I cannot scroll down. I don't want to have to scroll down. Can I make the size and/or spacing of the buttons dependent on the screen size?
Thank you!
http://farah-sean.samanthaongphoto.com/index2.html
For responsiveness you can use 2 methods.
Or you base your CSS style based on percent and your layout will fit on the size screen, or you can define CSS rules based on screen size with CSS property #media
See exemple bellow from W3C #media
#media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
Defining various #media for different screen size will make your layout responsive.
My designer just gave me website which I need to use different images with z-index on them on both side of website. The image that I used on the left side is fine but the one on the right side shows a scroll bar on the bottom when opened on smaller screen resolution (below 1920 width).
So How can I get it right?
Take a look http://whitepixelstesting.com/sunexim/
You should have used background image, it would have been simpler.
But it this case, I would recommend you to use a CSS Media Query.
By adding overflow: hidden to your #main_wrapper, you solve the problem for screens between 1920px and 990px. If you keep the hidden overflow, you will hide your content for those below this screen width. That's why you should add this at the end of your Style Sheet:
#media all and (max-width: 991px) {
#main_wrapper {overflow: visible;}
.right_bg {display: none;}
}