I am creating a website using Twitter Bootstrap; the website now looks OK on desktop or laptop but when I view in mobile the font-size does not adjust to the screen suitable size. Could someone told me how to fix that?
<section class="box">
<img src="images/background2.jpg" class="img-responsive" alt="">
<div class="carousel-caption">
<h1>Do you love to scuba dive? Are you looking for your next bid dive event?
</h1>
<p>Look no further. Join ABI and other experienced divers throughout the year as we travel to amazing ocean resort destinations for state of the art diving experiences. Each trip will include
multiple dives operated by experienced dive companies. All proceeds from these diving excursions will benefit the ABI Endowment Fund
[endowment.abi.org]
Do something you love while supporting the ABI Endowment Fund. Get more information about ABI's upcoming dive excursions.
</p>
</div>
</section>
html { font-size: 62.5%; }
body { font-size: 1em;}
#media (max-width: 300px) {
html { font-size: 70%; }
}
#media (min-width: 500px) {
html { font-size: 80%; }
}
#media (min-width: 700px) {
html { font-size: 120%; }
}
#media (min-width: 1200px) {
html { font-size: 200%; }
}
Try this :)
http://jsfiddle.net/yv5eu/
Of course you can use media queries as Nick has suggested. But a more fluid alternative is using Javascript to do the trick as Tushar has solved. If you're not comfortable with coding in JavaScript, FlowType.js is a lightweight jQuery plugin that is simple to use made for responsive fonts.
Related
I'm trying to make a heading on my website responsive so it's smaller on mobile and doesn't wrap. I looked up the code to use but it's not working. Can someone please tell me why? Thanks
I've added a div class and then referenced it in a media query but it doesn't do anything.
#media (max-width: 768px) {
.contact-heading {
font-size: 5px;
}
}
<div>
<h3 class="contact-heading">CONTACT FLOWERS FOR EVERYONE</h3>
</div>
<br>
<br>
I've read up a lot on adaptive design. All the sources I could find at some point mention server side approach or at least talk about how it makes faster loading times, because you only serve what the client needs. In contrast with responsive design, you deliver out one content that adapts on client side, by media queries for example. Fluid grids and layouts come to my mind.
However, I thought of a very basic, naive and (from my understanding) pretty boneheaded approach that I just could not find a pattern for. Probably because it's so dull.
My idea was basicly to craft a separate view for each device like you'd normally do with adaptive design, but put them into divs and just display the one that matches the device dimensions. This of course delievers, depending on the views, about n-times as much data as server side adaptive design would, with n being the number of different views. However the view could switch on the fly without reloading the page for example. Again, just an idea I had. From my understanding, it does what adaptive design does, just with another technical approach. Is this pattern still called adaptive design?
switches.css and index.html
#media (max-width: 991px) {
.phone {
display: inline !important;
}
.tablet {
display: none !important;
}
.pc {
display: none !important;
}
}
#media (min-width: 992px) and (max-width: 1199px) {
.phone {
display: none !important;
}
.tablet {
display: inline !important;
}
.pc {
display: none !important;
}
}
#media (min-width: 1200px) {
.phone {
display: none !important;
}
.tablet {
display: none !important;
}
.pc {
display: inline !important;
}
}
html {
font-family: sans-serif;
}
h1 {
font-size: 36px;
}
<!DOCTYPE html>
<html>
<head>
<title>Am I adaptive?</title>
<meta name="viewport" content="width=device-width" initial-scale="1">
<link href="switches.css" rel="stylesheet">
</head>
<body>
<div class="phone">
<h1>on small screen</h1>
<p>Here goes the view for small sized devices</p>
</div>
<div class="tablet">
<h1>on medium screen</h1>
<p>Here goes the view for medium sized devices</p>
</div>
<div class="pc">
<h1>on large screen</h1>
<p>Here goes the view for large sized devices</p>
</div>
</body>
</html>
EDIT: Thanks to the comments so far! I want to emphasize: I totally agree on this being pretty much the definition of an anti-pattern. I hope my question makes that clear! I don't consider this a practical thing. However, I am interested in what this is called (if it is called anything at all), or if it is still adaptive/responsive by definition. If not, why?
To me, this seems more like an anti-pattern, or the 'responsive' design pattern.
The point of adaptive design is to limit the amount of work the browser does, and also to reduce the amount of traffic to and from the device.
Think about how this would work on a device with poor bandwidth, such as a mobile phone with a patchy signal. It makes more sense, from a usability perspective, for the server to decide what to send to the device based on the user-agent, or other criteria.
I want to hide my menu icon on smartphone screens but the media query isn't working. Can anyone shed some insight?
I tried looking at some other answers on here but nothing really helped as I am checking it by re-sizing my browser but I'm using max-width so it should still show.
I have three different logos. One for desktop, one for tablet, and one for mobile. Right now I'm trying to hide my desktop logo for mobile and it's not working so I thought I would try to find out why before trying to hide/reveal any more images.
UPDATE: SOLVED. I'm not sure why it works but after constant refreshing and 30 minutes later it works.
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
#menu-logo {
display: none;
}
}
<div id="header" class="header">
<img id="menu-logo" src="../images/logo.svg"/>
<img id="menu-logo-semi" src="../logo-semi.svg"/>
<img id="menu-logo-small" src="../logo-short.svg"/>
</div
There's no need to have 3 links.
A better way to do this is as follows:
<div id="header" class="header">
<a class="logo" href="/index.html">My cool name</a>
</div>
<style>
<!-- Desktop -->
.logo {
display: block;
text-indent: -9999px;
width: 200px;
height: 82px;
background: url(logo.svg);
background-size: 100px 82px;
}
<!-- Tablet -->
#media all and (max-width: 64em) and (min-width: 48em) {
.logo {
width: 80px;
height: 60px;
background-size: 80px 60px;
}
}
<!-- Mobile -->
#media all and (max-width: 48em) {
.logo {
width: 50px;
height: 30px;
background-size: 50px 30px;
}
}
</style>
Cleaner code.. Just change your logo sizes as you need.
EDIT
I don't know if your logo changes visually on each screen resolution interval. If so, just state another "background: url ..." rule on each media query, before the "background-size". If not, it will be ok since it's a vector, as long as the proportions are correct.
The cause is most likely due to CSS specficity, and the order of things in your stylesheet(s). We need to see all of the CSS affecting the #menu-logo item, and the img generally, especially the default (ie non-media query) CSS, and any other media queries that affect this menu-logo item.
And we also need to know whether such CSS comes before or after the media query - the order of things is very important. (NB: I know really this would be better as a comment rather than a full answer, but I don't have enough rep for that yet!)
So look at the specificity, and the order, then if still flummoxed give us more of the CSS (or the whole stylesheet if it isn't too long).
Hi i got this image gallery and information that should be seen on the right side of the pictures. i floated them both as left. my default resolution is 1366 x 768. it turned out ok. but if i change it to 1024 x 768, the information keeps going down, i need to keep the information on the right side of the image even though other users have different resolutions. here is the code, can some help me?
HTML
<div id="home_page_images">
<div id="home_page_images_slider">
<img src="images/accred_images/image_1.JPG" alt="In the office with the evaluators" />
<img src="images/accred_images/image_2.JPG" alt="Evaluating faculties" />
<img src="images/accred_images/image_3.JPG" alt="CCS students OJT" />
<img src="images/accred_images/image_4.JPG" alt="Packaging of hard documents" />
<img src="images/accred_images/image_5.JPG" alt="Meeting of the evaluators" />
</div>
</div>
<div id="home_page_content_frame">
<div id="home_page_content">
<span>Welcome to the QCE and CCE Evaluation System</span>
<p>The CCE Evaluation process, also known as "Accreditation", is a voluntary, non-governmental process that includes an external review of a professor’s ability to provide quality programs. It is helpful in many aspects, from ensuring that students are learning relevant material to allowing a school access to funding. Accreditation reviews include self-evaluations, peer-reviews, committee-reviews, and the development of in-depth strategic plans. They also include reviews of a school’s mission, faculty qualifications, and curricula.</p>
</div>
</div>
CSS
#home_page_images {
position: relative;
width: auto;
margin-top: 40px;
margin-left: 40px;
float: left;
}
#home_page_content_frame {
float: left;
width: auto;
}
#home_page_content p {
text-align: justify;
position:relative;
}
On your divs, you could use percentages instead of pixels like robobobobo said, but then if you are making it for mobile devices, you would probably want to use media queries as mobile devices are small, and if you decide to use something like 50% for desktop devices, it would be really small, example of media queries:
#div {
width:375px;
}
#media screen and (min-width: 1366px) {
#div {width:375px;}
}
#media screen and (min-width: 1440px) {
#div {width:428px;}
}
#media screen and (min-width: 1600px) {
#div {width:434px;}
}
#media screen and (min-width: 1920px) {
#div {width:540px;}
}
Change the (min-width: 1920px) part to the minimum or maximum size you want the code to be fore.
I'm creating a coming soon page but want the h1 header to have different titles as the screen widths change. Here's my problem though:
<h1 class="hide1">HOLD ONTO YOUR HATS</h1>
<h1 class="hide2">COMING SOON</h1>
<h1 class="hide3">ON ITS WAY</h1>
<h1 class="hide4">PENDING</h1>
<h1 class="hide5">NIGH</h1>
...and then:
#media only screen and (min-width : 1200px) {
.hide2, .hide3, .hide4, .hide5 {
display: none;
}
}
This is all a bit chopped and hacked together.
Is there a more semantic way of doing this that will 1, hide the other h1's in the source code and 2, Hide the other h1's from screen readers?
Thanks
edit: The title was a little confusing so it has been changed
Ok I don't seem to be able to question something in a way that's making sense, something to work on in the future I guess.
So after working on it for the past couple of days I think I may have found a solution that is less hacky.
<h1><span class="main__header--changer">COMING SOON</span></H1>
...and the css
#media (max-width: 75em) {
h1:before {
content: "HOLD ONTO YOUR HATS";
}
.main__header--changer {
display: none;
}
}
The only thing is though screen readers won't be able to read the header.