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
Related
I know this question must sound familiar, and I can see loads of people asking similar questions but none of the answers are working for me. Everyone has a fairly specific need. I want to understand the basics and I can work out the rest.
I have a simple angular/bootstrap web page. I have made a carousel component and I want to ensure the user always sees the entire image. I have seen lots of answers which suggest img-fluid, max-with, max-height etc., but nothing's working for me. It's sort-of working for landscape images but not for portrait images. I need it to always show the whole image regardless.
Here is the basic app component:
<app-nav-menu ></app-nav-menu>
<div style="padding:10px">
<router-outlet></router-outlet>
</div>
The router-outlet goes to this "about-us" component:
<div class="row">
<div class="col">
<app-carousel [slides]="slides"></app-carousel>
</div>
</div>
And the carousel component looks like this:
<div class="container">
<div class="row">
<div class="col">
<div>
<img [src]="slide.src">
<p style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
{{slide.text}}
</p>
</div>
</div>
</div>
</div>
As you can see it's really simple. Right now there is no styling other than the little bit in the p tag which is to center the text in the image. This is not working properly now, because I think I've lost the container whilst trying out different solutions. I don't like CSS because I'm not used to them and I like to see the styles where they belong so I can understand better. But feel free to suggest a CSS solution if necessary.
So the question is simple: how can I make the image always fit the screen and not spill downwards?
Thanks
Did you try the object-fit property?
object-fit: cover;
If your image aspect ration is good, it shows the entire image.
object-fit: contain:
This shows the entire image, but if the aspect ratio is not good, it shows blank spaces around the image.
Thanks SureN.
I tried both of these but they didn't work. Perhaps they would do if I knew how to use them better.
In the end the following more or less worked for me, in the img tag:
style="max-width: 100%; max-height: 100vh; display: block; margin-left: auto; margin-right: auto;"
It's not perfect but it'll do for now!
I'm working on a mobile app. It's a protected website using jQuery mobile for the presentation framework. The protected content, the list of team members, is delivered via Ajax after authentication and identity verification. Here's a screen shot from my phone. The site is responsive, and can be used by desktop, tablet or mobile. Obviously it's optimized for mobile with tel:, sms: and mailto: links
I don't understand the odd corners on the images. This is erratic, and happens 75% of the time. This only happens to the upper left hand corner of the top image in the list, and the bottom left hand corner of the bottom entry in the list, no matter how long the list is. Generally, the corner displays round if you refresh the screen. I'm sure its some sort of timing issue, but I've not seen it before. I'm using iphone 6 with Safari browser for that screen shot. I see the exact same thing in Chrome on my laptop in desktop mode. I don't think this is a device or browser dependent issue.
HTML:
<div id="page6_team_phones">
<div role="main" class="ui-content jqm-content">
<h2>Phone Contact List</h2>
<ul data-role="listview" id="phonelist" class="ui-listview">
<li class="ui-li-static ui-body-inherit">
<div class="img_container"><img class="img-photo" src="https://images.unsplash.com/photo-15..."></div>
<div class="userName">Andrea Apple</div>
<div style="clear: both;"></div>
<div class="phoneNumber">1234567891</div>
<div class="sms"><img src="../images/crosstxt-icon.jpg"></div>
<div class="email"><img src="../images/email-icon.png"></div>
</li>
<li class="ui-li-static ui-body-inherit">
<div class="img_container"><img class="img-photo" src="https://i.imgur.com/KOXOBiN.gif"></div>
<div class="userName">Bill Banana</div>
<div style="clear: both;"></div>
<div class="phoneNumber">9876543211</div>
<div class="sms"><img src="../images/crosstxt-icon.jpg"></div>
<div class="email"><img src="../images/email-icon.png"></div>
</li>
CSS:
.img_container {
float: left;
}
.img-photo {
height: 24vw; /* photo = square aspect ratio */
width: 24vw;
object-fit: cover;
border-radius: 20%;
}
Anybody understand exactly what is causing this issue? Why only top left and bottom left? Best way to improve the display?
Upon inspection, I've found that jQuery mobile has some CSS that affects the first and last elements in your list. You could modify the styles directly, but it's probably much better to override the jQuery mobile CSS by adding !important to the property (border-radius: 20% !important;). Doing that in your JSFiddle fixed it for me.
Here's a fixed example.
I know there's already an accepted answer but it feels more like a patch than a full understanding.
That rule only triggers for any element that is NOT of a class .ui-li-icon as you can see below:
.ui-listview>li.ui-first-child img:first-child:not(.ui-li-icon)
So simply add that class to your image like so:
<img class="img-photo ui-li-icon" src="https://images.unsplash.com/..." onclick="openImgModal(this.src)">
This will tell CSS to NOT apply those rules.
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!
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'm trying to modify a bootstrap template to add a full length 1200 px banner at the top, instead of the smaller 120 x 60 images/logo-company.png logo that is there on the original site.
I have tried to no avail, but I would like to be able to seat this larger banner perfectly for desktop view, while having it be responsive on mobile devices.
I assume the original logo was so small that it didn't needto have code call outs to make it responsive.
Would anyone be kind enough to take a look and see if they can supply the necessary HTML and or CSS code to achieve this for me please.
original site.
http://jituchauhan.com/industrial/boxed-layout/industrial-darker/index.html
If background image isn't working for you here is a simple solution:
<div class="header-row" id="header-row" style="padding: 0px; overflow:hidden; height:100px;">
<!-- container-fluid is the same as container but spans a wider viewport,
it still has padding though so you need to remove this either by adding
another class with no padding or inline as I did below -->
<div class="container-fluid" style="padding: 0px;">
<div class="row">
<!-- You originally has it set up for two columns, remove the second
column as it is unneeded and set the first to always span all 12 columns
even when at its smallest (xs). Set the overflow to hidden so no matter
the height of your image it will never show outside this div-->
<div class="col-xs-12">
<a class="navbar-brand logo" href="index.html">
<!-- place your image here -->
<img src="http://placekitten.com/g/1200/600" alt="company logo" style="width: 100%;">
</a>
</div>
</div>
</div>
</div>
You can set background image for header and remove/hide the logo image.
#header-row {
background-image: url(../images/logo-company.png);
}