I am designing a web without meta viewport. I want to show my web on mobile as well as desktop.There is problem in the comperision of home(index) and inside page.Home page header and footer showing properly but on the inside page header showing good but not as well as home page and footer not showing properly in full width.Plz help me Thank you
there is problem only for mobile and tab
http://websum.in/prome/concepts.php
Please paste html code and css code other wise cannot full help you. And or your code show some example through codepen or jsfiddle I see you have not set any media queries for you need to set some media queries for mobile formats some where along those lines you should look into bootstrap to see how they are done.
I had a look in firebug on your website could not see any media queries
Example only
#media (max-width: 648px) {
.footercontainer {
width: 90%;
}
}
Edit: just realized you didn't say you use Twitter bootstrap. This example requires Twitter bootstrap, or you could fetch the Css classes from there.
What you could do is make sure the text blocks in the footer appear centered and underneath each other on mobile. Something like this:
<div class="footer">
<div class="row hidden-xs">
Desktop footer
</div>
<div class="row visible-xs">
<div class="col-xs-12 text-center">
Icons and stuff.
</div>
<div class="col-xs-12 text-center">
Copyright.
</div>
</div>
</div>
Related
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'm building a website which will list some buildings for sale with a picture and a small description. Since I want the website to be responsive I'm trying to use the Bootstrap3 grid system.
So the current html I have is as follows (running code here on bootply):
<div class="container">
<div class="row">
<div class="col-sm-8">
<article class="row property-ad">
<div class="col-sm-4">
<img class="property-thumbnail" src="https://uwaterloo.ca/pharmacy/sites/ca.pharmacy/files/uploads/images/pharmacy-building-street-view.jpg">
</div>
<div class="col-sm-8">
<div class="property-ad-title">Nice building</div>
<div class="property-ad-description">and some describing text here</div>
</div>
</article>
</div>
<div class="col-sm-4">
<div class="right-side-ad">
some advertisement is going here
</div>
</div>
</div>
</div>
The problem is that the title and description are only displayed correctly on a large (lg) screen. On an md or sm screen however, the title and description are partly displayed on top of the image because the image appears larger than its container. I tried giving the image a max-width: inherit;, but that doesn't seem to do anything.
Next to the fact that I don't know how to give it a proper max-width, the main problem seems to be that I don't really know what behaviour I would want. Because if the image resizes its width, it would either get distorted, or it would also need to change its heigth. If the height changes however, the text next to it could get a larger height than the image, which would also make the layout look messy.
So my main questions;
What is the typical desired behaviour to make a website responsive when working with images that are next to text?
How would I implement that?
All tips are welcome!
Don't use your custome class for the img just add the bootstrap class for responsive images
img-responsive
<div class="col-sm-4">
<img class="img-responsive" src=".....jpg">
</div>
Check this Bootply
Simply stated: Bootstrap has the img-responsive class, or you could set max-width: 100% to the img tag.
With Twitter-Bootstrap 3 Is it possible to add a search bar that has a set width on your navbar then shrinks on the right side as you make the webpage smaller? For example youtube.com does this with their site. If this is possible could you get me started on how this would be done?
-Thanks
Check out the grid system documentation at bootstrap
Basically you'll do something like
<nav class="row">
<div class="col-md-8">Search bar here</div>
<div class="col-md-4">Other header stuff</div>
</nav>
do you mean like this?:
.navbar{
width:100%;
min-width:500px;
}
I am trying to have a centered main content div along with a right sidebar using Bootstrap 3.0.
I have tried the following code to achieve this.
BootPly
But when i resize the browser to shorter width, the sidebar gets pushed down and also the main content get wider. Is this behavior expected of bootstrap ? Do i need to add col-xs* to accommodate the shorter width ?
I am wondering if this is the correct way to achieve this design ?
Thanks !
Yes, it is default behaviour. Bootstrap 3 was built with "mobile first" in mind, so the layout is responsive by default. You can achieve this effect by writing a custom grid and not using the Bootstrap column classes, like col-sm-6 and so on.
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="content">
Main Content
</div>
<div class="sidebar">
Side bar
</div>
</div>
</div>
</div>
Then write some css. This is just an example, and you should customise to fit your own needs.
.sidebar { width: 33.3%; }
.content { width: 66.6%; }
You can fit two columns on the smallest screen size, but it's unlikely that this is what you are after. On small screens there's very little space for any substantial content to fit into two columns.
<div class="col-xs-6">
Main Content
</div>
<div class="col-xs-6">
Side bar
</div>
You are indeed correct that this is a feature of bootstrap :) You're also correct on using .col-xs-* to achieve your planned design. To add to what you're trying to do, (just in case you haven't tried this already) you can also combine the grid classes in order to accommodate the different screen sizes.
Here's an example:
<div class="row">
<div class="col-md-8 col-sm-6 col-xs-12">
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
</div>
</div>
Goodluck! :)
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