I have a navbar like this. http://www.bootply.com/COgUDvOM1e when I am trying to reduce the size the screen the navbar is collapsing. But I want to reduce the distance between lines.
I tried the below
.multiselect{
height:40px;
}
But it doesn't work.
It looks like you need to reduce the padding of this element. Here's the code that would do it:
#media (min-width: 768px)
.navbar-nav>li>a {
padding-top: 8px;
padding-bottom: 5px;
}
I would suggest using something like Chrome Dev Tool to inspect the elements and change the CSS within the page.
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.
I don't believe I'm grasping how to create a responsive website. this is my code:
body{
width: 100%;
font-size: 16px;
background-color: grey;
}
h1{
color:black;
}
p{
color:black;
}
#media only screen and(min-width:320px)and(max-width:420px){
h1{
color:red;
}
p{
color: white;
}
}
my goal with this small css edit was to see if I understood how the media query worked and to change the h1 and p element colors when a screen size is in-between mobile size.
however, regardless of what size the screen is, there is no changes the elements. I'm slightly confused because I've seen videos of people using this as an example.
You have the right order of things, normals rules first and then mobile rules afterwards.
Let's say you have two buttons on the screen for a desktop and a phone. Because a mobile phone obviously does not have the width to spare you may want to show the buttons above and below each other instead of side-by-side.
I have a phone with a horizontal screen width of 375px. If the buttons are rendered as 250px then they blatantly won't render side-by-side on my phone without clipping and therefore looking messy to visitors.
Take this code in to consideration:
input[type='button'] {display: inline-block; width: calc(50% - 8px);}
#media (max-width: 1024px)
{
input[type='button'] {width: calc(100% - 8px);}
}
The button input elements are set to use (roughly) 50% width (compensating a bit for border and margin). Since they are inherently display: inline; I'm using display: inline-block to keep them rendering on the same line (no line breaks for outright block rendering) though allow setting the width hence inline-block.
The media queries do not negate something like display unless it's explicitly defined, again so all the input buttons are still rendered as inline-block. But now on a mobile screen these buttons will use up enough space that they'll push each other to separate lines.
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 have a logo with a menu next to it:
This is the HTML:
<div id="logomenuwrapper">
<div id="logo"><img src="img/logo_light.jpg"/></div>
<div id="menu">
<ul>
<li>About</li>
<li class="notfirst">Work</li>
<li class="notfirst">Contact</li>
</ul>
</div>
</div>
This is the CSS:
#logomenuwrapper{overflow:hidden;}
#logo
{
padding-right:1.2%;float:left; max-width:100% !important;
max-height:100% !important;
display:block;
}
#menu{float:left;padding-left:1.2%;font-size:0.875em;border-left:1px solid #ea4a4a;}
#menu ul li.notfirst
{
padding-top:0.3225em;
}
I have added some media queries that will make the menu font smaller when screen gets smaller.
At some point, the menu will be smaller than the logo. What should I add to make the logo scale with the menu? I already added:
img {max-width:100%;}
A picture of how it looks like on smaller screen (as you can see the logo is too big):
Try changing your media queries to something like this:
#media screen and (max-width: 800px) {
body {
font-size: 85%;
}
#logo img {
width:84%;
}
}
#media screen and (max-width: 400px) {
body {
font-size: 75%;
}
#logo img {
width: 75%;
}
}
and #logo to something like this:
#logo {
padding-right:12px;
border-right:1px solid #ea4a4a;
float:left;
}
Working Example
Note: Be sure to put #media screen and (max-width: 800px) above
#media screen and (max-width: 400px) as seen above.
See Why do the order of media queries matter in CSS? for more information on placing media queries in order.
It's admittedly not semantic... but have you looked into scalable text - FITTEXTJS
It uses javascript - but it allows the text to scale as well. You already have a solution to the image - But I see the problem lies in the text itself - Using media queries has you define break points, but doesn't make your text as fluid as YOU need it. I'll edit my post with a fiddle as soon as I come back from the gym, just thought I'd post this thinking it MAY be helpful.
You should set the width of the image wrapper (#logo in your case) inside the mediaqueries to get the image scaled. Or set it globally in percents (see jsfiddle link).
Also add max-width: 100%; for all images.
img { max-width: 100%; }
#logo {
width: 14%;
// remove max-width:100. not needed.
...
}
See http://jsfiddle.net/weP7u/ and resize the browser
I think your going about this the wrong way. Why make the text smaller when the screen is smaller? This probably occurs on a mobile device where you need to make sure you have touch targets that are big enough to reliably click your menu. You could keep the text the same size, and add padding/margin to make the touch target better, but that makes this menu even "bigger" next to the logo.
Instead at the smallest size, try stacking the nav underneath the logo and then once that looks lost as the screen gets bigger, bring the menu up to the right of the logo like you currently have. This neatly gets around doing any text or image scaling, while enhancing your design for small devices.
I put together a demo for you. Be sure to view the full preview so you can resize and see the new menu behavior.
You could use any pattern you want at the smallest size, I went with a simple stacked pattern because your menu easily fits in one row. If you had more navigation items in the future, you could do an accordion or even move to an off-canvas approach.
Further reading:
Check out Chris Coyier's post on making designs tablet friendly, some great tips in there.
Also, check out Trent Walton's short post about type and touch.
I have a simple page that has a wrapper with a background color on it. When I scale the browser in to a small size the wrapper pops out of position. Its like 20px at the left was added.
Also when you scale the browser in small the input fields drop down to the next line. How can I stop that.
http://www.artaholic.com/push/bc/acc.html
Remove the:
<link type="text/css" rel="stylesheet" href="bootstrap/css/bootstrap-responsive.css"/>
if you not really need it. It'll solve the jump.
The 20px from bootstrap responsive , this line I believe:
#media (max-width: 767px) {
body {
padding-right: 20px;
padding-left: 20px;
}