I am trying to make a responsive navbar which so far I have achieved the only thing left that I would like to do is fix how the navbar looks in smaller windows.
As you can see small resolution the navbar overlaps the image when you get to smaller resolutions.
And when you are on desktop resolutions it looks like this enter link description here the navbar to the right doesn't quite look right.
If anyone could point me to some resources that would help me fix this or if anyone could explain what I would need to change that would be great.
Also can anyone tell me how I can link my code so that it makes it easier for you guys to see what I have done.
Thanks
Here are a few techniques you could use for your logo.
remove any width or height attributes from the image tag and then scale it based on the viewport width. eg
HTML
<div class="header"> <img src="logo.jpg" class = "logo"> </div>
CSS
.logo{
width:50vw;
max-width:500px;
}
you could add more than one image tag in your header, one for desktop and one for mobile. Use a different class for each then use CSS media queries to hide or show one logo at a time based on viewport width.
HTML
<div class="header"><img src="logo-desktop.jpg" class = "logo desktop"> <img src="logo-mobile.jpg" class = "logo mobile"> </div>
CSS
.logo{
display: none;
}
.logo.mobile{
display:block;
}
#media (min-width: 768px) {
.logo.mobile{
display:none;
}
.logo.desktop{
display:block;
}
}
one of my favourite techniques is to use background images rather than using an image tag. This makes it easy to overlay text if needed, and it's efficient on mobile because you can use media queries to define different images at different viewports and just one will be downloaded.
I hope this helps!
Related
I'm creating a website for a company and their photographer asks me what dimensions the pictures on the website are.
I work with CSS Bootstrap and grid system like:
<div class="col-md-12">
<div class="fh5co-grid" style="background-image: url(images/xxxx-1-2.jpg);">
<a class="image-popup text-center" >
<div class="prod-title ">
<h3 style="height:5%;"> “text"”</h3>
</div>
</a>
</div>
</div>
So on the server the images had a size of 474 x 698 pixels, but the grid system crops the image a bit?
What size/dimension does the grid system use?
Thanks a lot
I think all you need is some css to make your images adopt to a screen of the device. A good practice, that I usually do, is to place this line of code inside my css.
img {
max-width: 100%;
}
Make sure it's at top of your first imported document, so you can override it with out any trouble in case you need some other image width.
PS. This rule should be in bootstrap, so check how you adding bootstrap to your webpage.
What you can do is add a css for this background image.
.fh5co-grid{
background-image: url(images/xxxx-1-2.jpg);
background-size: cover;
background-repeat: no-repeat;
}
If you want to make sure this code will get the full screen width, make sure your html col-lg-12 is wrapped on a container-fluid.
I am trying to share the navbar across all devices, but I want it to format differently on small screens than on large. I am new to Bootstrap so this might be obvious, but I am having trouble getting the menu right with a single set of code and not trying to do it with different rows and col-* settings.
Bootply Sample
I want two things actually. I would like the win and loss to be on the same line (which is close without the navbar-right) except they are not even in vertical position.
EDIT: I am able to correct this when removing navbar-right etc..., but do not get the navbar-right when the menu is condensed.
Secondly, I wanted the navbar-right, so when on a small display, all the badges align on the right hand side of the menu.
Is there a way to keep the menu smaller as well, so on a tablet it is not the whole width of the screen while on a phone it might be?
When the navbar normally draws, I want the badges beside the labels to keep the menu items smaller/closer together. Only on the pull down menu do I want them to go to the right.
Do I need to create two copies of the navigation to achieve this?
First, the badges seem aligned to me if you remove those navbar-right classes. If you are using that class just to float them right, you should be using pull-right but in this case there's no need.
Second, if you wrap your badges inside another span, then you can use media queries to float the container right on mobile devices.
<span class="badges">
<span class="badge alert-success">Win: 3</span>
<span class="badge alert-danger">Loss: 1</span>
</span>
/* Note that you can use Bootstrap's '#screen-sm-min' variable if using LESS.*/
#media (max-width: 767px) {
.badges {
float: right;
}
}
If you want your navbar to be full width on mobile but not any other device, you could try something like this:
#media (min-width: 768px) {
.navbar {
width: 80%;
margin: 0 auto;
}
}
Demo
Edit
For the changing width you can use Bootstrap's col-*-* classes like this:
<div class="wrap">
<div class="row">
<div class="col-sm-10 col-sm-offset-1">
...
</div>
</div>
</div>
That means for mobile it'll be full width, but anything from portrait tablet upwards will take up 10 of the 12 grid.
Demo
I'm using Bootstrap 3 with a fixed width.
My footer exist of two colums (left & right) with each a different background color.
I want the content of my footer to be wrapped in the '.container' so it aligns with the rest of the content on my website.
Now here is the thing I can't get to work:
I want to make it look like the footer has a full width. So left of the '.container' should be one color and the right an other.
Plus when the resolution gets below a certain point the two colums should shift under each other but with the background colors still fullwidth.
See picuture to make it all more clear.
picture
My first thought was using a background image on '.container-wrapper' and then on the mobile version a different background aligned from the middle. Like this:
CSS
.kleur {
background:url(img/test-bg.jpg);
background-repeat:repeat-y;
background-position:center; }
#media (max-width: 992px) {
.kleur {
background:url(img/test-bg2.jpg);
background-repeat:repeat-x;
background-position:center; }
}
HTML
<div class="fullwidthcontainer kleur">
<div class="kleur-links" style="background:#cfcfcf; height:100%; width:100%"></div>
<div class="container">
<div class="row">
<div class="col-md-8" style="background:#feff8b;"> <br/><br/><br/> <br/><br/><br/> </div>
<div class="col-md-4" style="background:#8bd7ff;"> <br/><br/><br/> <br/><br/><br/> </div>
</div>
</div>
Link to working example, scroll down
This works fine for Desktop, but for Mobile it only works if the two columns have exactly the same height. I really like the height to be variable, but don't have any idea how...
Anyone any thought?
This is a fluid solution:
Fluid solution without backgrounds
But I rather have a solution with a fixed width
So, I'm working on my first website with Twitter Bootstrap. Works great.
Now I'm trying to get the website responsive.
When I make the screen smaller(Too simulate a mobile phone screen), the logo gets bigger and bigger, until it gets too the smallest page size(I geuss?), then it jumps too a smaller size and it stays there.
Does anyone have an idea how to fix this? I want it too stay the same size...
HTML:
<div id="header" class="container">
<img id="logo" class="span2 offset1" src="img/logo.png" title="Hostellerie De Hamert">
<h1 id="deHamert" class="text-center span6">Hostellerie De Hamert</h1>
</div>
CSS:#logo{
background-color: transparent;
max-width: none;
}
And of course, bootstrap integrated.
You set the "span2" class on the image element. When using Bootstraps responsive library all "spans" will stack on top of each other instead of float from a certain screen width. I suggest you simply set the width and height of #logo to a static value.
http://jsfiddle.net/pC2xd/
Try removing the width: 100px; height: 100px to see what happens without these static values.
maybe you should try class='container-fluid'.
refer here: http://twitter.github.io/bootstrap/scaffolding.html#responsive
I am trying to achieve the following in the image posted below. When I resize the browser I want the image and button to decrease in size but maintain the same ratio with the main background. I also want the text to not overlap the image so the font size should get smaller. How can I achieve this in css? Heres the image: http://i.imgur.com/2qR2y4E.png
This is the HTML code I believe should be correct. I've tried in the CSS absolute positioning of the image, i've tried floating each element and using percentages for widths. If it gets to a mobile width I would just display:none on the image but keep the button. Any help is appreciated.
<div class="content">
<div class="text>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
</div>
<div class="image">
<img src=".." />
<div class="button"></div>
</div>
</div>
I have created a fiddle based on the link by Jake - http://jsfiddle.net/GkrpR/2/
It changes the size of the image and text box when you resize the screen.
It's a bit rough, so will require you to change the css values to suit your needs. But should be a good start for you.
It uses media queries in the css to check the max screen size, and then changes styles based on that.
As an example, when the screen size gets to 300px or less the following style is used:
#media screen and (max-width:300px){
.image img{width:45px;height:50px;}
.text{height:30px;font-size:6pt;color:#aaf;}
.main{width:100px;}
}
Hope this helps