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.
Related
I'm trying to create a nav with a logo and links. I want the logo to always remain in the same position, vertically centered on the left, but I want the link items to change depending on the screen size.
On small screens, I want a small font size with the links aligned to the right
2.On medium screens, I want a medium font size with the links aligned in the center
On large screens, I want a larger font size with the links aligned in the center
Ideally, I want the changes to happen whenever the text is right about to hit the logo.
Here's a link to what I'm picturing.
What you need is called breakpoints - it changes CSS styling when viewport size changes. The syntax looks like this:
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
You can read about it here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
You could use media queries to adjust font size and positioning based on screen size. #media (max-width 600px) {
[your nav name] a { font-size: .7rem; float: right; }} for example. Adjust for different screens accordingly.
I used flex containers and div(s) within it to make a menu bar for my site. All the text has been aligned to the center.
I need the text to be aligned to left once it resizes in smaller devices. Is there a way to do it using css?
If based on screen size, then you can use CSS #media screen https://developer.mozilla.org/en-US/docs/Web/CSS/#media in stylesheet or <style>...</style> tags.
#media screen and (max-width: 767px) {
p,li{
text-align: left;
}
}
Meaning that at a max width of 767px to execute the enclosed styles.
NB: you will have to look out for CSS Specificity. To ensure styles in other sections don't still override the ones in the #media https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
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;}
}
I've made a website that stretch a container to the bottom. In that container, there are divs that fit perfectly the screen at low resolution such as 1366x768 ...etc
But when the resolution is higher (1440x900...etc) There is a blank space left under the divs (link to view website at different resolutions)
So is there a possibility to fill that space with divs only in high resolution ? I've tried overflow-y:hidden,but since the container's height must be in auto it doesn't affect it.
Use media queries that target resolution like
#media screen and (min-resolution: 300dpi) {
#myDiv{
display:block;
}
}
Alternatviely, you can target dimension such as width like
#media screen and (min-width: 1000px) {
#myDiv{
display:block;
}
}
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.