Currently at full size I have my nav bar set up in horizontal manner.
I achieved it by using float left.
Now I am trying to make responsive website and how do I remove float left so it would be back to horizontal again?
You could use media queries to set your responsive widths. When the screen is under your desired screen width, change the float. See example below:
nav { float: left; }
#media only screen and (max-width: 500px) {
nav { float: none; }
}
More info on media queries can be found here: http://www.w3schools.com/css/css_rwd_mediaqueries.asp
Related
So I was working on a static website that uses only HTML and CSS. I made the website in desktop view so when screen size is more than 1220px the website will look exactly as I want it to. For selecting services I have a picture as a background and some text inside it. The dimension of picture is 420x469 px. I have a total of 4 pictures and I put them in pairs of 2. So like this (Service 1) (Service 2). I have padding of 7.8% on both left and right side and 8% padding on bottom. Currently if someone access my website from mobile, then service 1 shows with 7.8% left side padding and half cut picture. Then service 2 below it just like Service 1.
What I want is that when someone uses website from phone, they see the picture completely and no padding. and if there is enough space, then some padding pls tell how i can do that
Have a look at these Docs here:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Then you can use CSS like this
.my-class {
/* Mobile - Desktop */
padding: 10px;
}
#media only screen and (min-width: 600px) {
/* Tablet - Desktop */
/* It will overwrite the other less specific classes padding */
.my-class {
padding: 30px;
}
}
<div class="my-class">
<h1>My Content</h1>
</div>
Bonus tip: Don't work with max-width in general, but with min-width. That means you will be working mobile first.
in css add this line it will work perfectly in any screen size
.service1{
width: 100%;
height: auto;
}
Define a #media query specifically for 'phones' like this :
#media (max-width: 640px) { /*...*/ }
You may want to remove the padding/margin for any smaller screen sizes. Try like this:
#media (max-width: 978px) {
.container {
padding:0;
margin:0;
}
}
Otherwise, Try using bootstrap it works very well in Adjusting margin/padding with screen size.
On our website: https://dev.shiftdivorceguide.com/ everything looks great on desktop.
When I switch to smaller screens like tablets I get a padding to the right of the screen. When I go even smaller (smartphones) I get an even larger padded area to the right of the screen.
I am unsure if the Panic Button bar at the top may be interfering with the code of the page (.panic-button-container). I have already tried altering the CSS in the media queries. To reduce the size of the white area on tablets I changed the code below concerning the logo and navigation widths.
I changed:
#media (max-width: 1024px) and (min-width: 981px) {
.header-right-panel {
width: 40%;
float: right;
}
}
to:
#media (max-width: 1024px) and (min-width: 981px) {
.header-right-panel {
width: 80%;
float: right;
}
}
This helped a little with the layout but I still get a white bar on smaller screens. The smart phones are the worst. Any possible solutions would be appreciated.
Stop using floats. Use Flexbox. Too many clearfix divs in the way.
Obviously the footer is extending past the site content body as well as some other elements.
If you really want to narrow it down set this style:
* { outline: 1px solid red }
That way you see what container is over-extending and then set it's width to 100% instead of a fixed width.
EDIT 2:
Using my technique I have narrowed down the problems:
.footer-menu
remove width: 500px;
.lp-section-content row
remove all negative margin
.vc_column-inner vc_custom_1548439628787
remove all padding
I am currently using Bootstrap v3.3.6 and jQuery v1.9.1. I have an application that will collapse a horizontal navbar once a certain screen resolution is reached. I like how this functionality works and would like to maintain the current screen resolution breakpoint. What I would like to do is also collapse the navbar when the navbar reaches a certain width. The application allows different users to have different roles which could add or remove items from the navbar dependent on the users' role.
Is there a way through CSS to collapse the navbar based on the width of the navbar? Is javascript the only option?
It does not seem possible without JavaScript. It's unclear exactly what you're trying to achieve, but you would have to use media queries in CSS to trigger events based on screen width, not individual element width.
This post: Can media queries resize based on a div element instead of the screen? covers the topic in question.
I would recommend looking at setting widths using em or vw. The latter will dynamically resize with viewport. You can then toggle display using media queries.
See: http://www.w3schools.com/css/css_rwd_mediaqueries.asp
See: https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/
Using viewport width/height measures are great for font resizing but might also allow your menu width to "flow" with the resizing of your browser, then you add media query breakpoints to toggle display or set fixed values once you reach a minimum or maximum.
If you are just interested in hiding a horizontal menu bar (e.g. top nav bar) when screen gets a certain width, you can use your browser developer tools or Bootstrap documentation to identify the class name of the element, and then add additional CSS to hide the element.
Here is an example of what I'm doing on a responsive app in the works:
div.top-nav {
/* some attributes here */
}
div.bottom-nav.menu {
visibility: hidden;
}
#media only screen and (min-width: 730px) {
/* perhaps set fixed max values after screen gets beyond tablet so fonts do not get too big if resizable in huge resolution monitors */
}
#media only screen and (max-width: 991px) {
/* some fixes at some desired width as screen resizes */
}
#media only screen and (max-width: 730px) {
/* hide or change element properties for tablets */
}
#media only screen and (max-width: 500px) {
/* hide or change element properties for phones */
.top-nav-item {
display: none !important; /* hidden on phone and display bottom nav items instead below */
}
.logo {
max-height: 25px !important;
}
.avatar {
max-height: 20px !important;
max-width: 20px !important;
}
div.bottom-nav.menu {
visibility: visible;
}
div.item.bottom-nav {
font-size: 4vw;
}
}
I'm not sure if I will be able to explain it clearly and if this is possible. I only have a basic grasp of HTML/CSS. I'm looking for a way to have a floating element not float when viewed from a smaller screen (mobile device). I have an image floating on the left side of a paragraph, but when viewed from mobile, the image with the text side-by-side gets too crowded. Is there a way to make it float on the left side normally, but appear on top of the text when viewed in smaller screens? Thanks!
What you need is to define Media Queries. Media queries are like css triggers that defines in which resolutions certain rules will be applied.
.div img {
float: left;
}
/*This will cause the img receive float none rule when screen is smaller than 768px*/
#media only screen and (max-width: 768px) {
.div img {
float: none;
}
}
There is a complete guide you can check out right here.
Using media queries should be what you need.
For example.
#media only screen and (max-width: 768px) {
.content {
float: none;
}
}
Basically that says if the screen size is less then 768px then the class content won't have any float.
What you are looking for is called MediaQueries:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You will need something like:
#media screen and (max-width: 400px){
yourelementselector {
... your CSS...
}
}
My navbar is supposed to be responsive. How can I hide the other links apart from a logo link called logo when the screen size is less than 680px? Thanks.
Try using a media query like this
#media screen and (max-width: 680px) {
.navbar a:not(:first-child) {
display: none;
}
}
Assuming that your logo link is an anchor (a)