i am just learning how to use bootstrap and media queries for the first time. I am trying to make some text get smaller when the screen gets smaller , however for some reason i am not sure why bootstrap does not do this, does this mean i need to use media queries ? or is there a function in bootstrap ?
HTMl:
<div class = "Logo">
<a class="navbar-brand" href="#">
<h1>Hello</h1>
<h2>There</h2>
<h3>You</h3><br/>
<p>Time To make a change</p>
</a>
</div>
CSS:
#media (max-width: 480px) {
.Logo {
Float : left;
height : 20px;
width: 70px;
}
}
I want it so that when someone was to launch it in an iphone etc the text which is in the navbar will just shrink and become smaller, but for some reason it is not doing it.
Thanks again for all the help , sorry if this is a basic question but just trying to understand bootstrap etc :)
I think you can just use:
#media (max-width: 480px) {
.Logo {
Float : left;
height : 20px;
width: 70px;
}
Logo.h1 { font-size: 80%; }
Logo.h2 { font-size: 80%; }
Logo.h3 { font-size: 80%; }
}
This will make it 80% of the original size.
Source: W3schools
you can solve your issue by simply adding 'viewport' meta tag in your html.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
This meta tag scales your whole content according to the dimensions of the device the web page is currently being viewed on. You can find more about this tag here.
Related
I have this html tag to put an arbitrary image on a page.
<img src="https://example.com/wp-content/uploads/....186.png" width="133" height="13" style="float:right; margin-right: 100px; margin-top: 40px;" />
However, I dont want this image on mobile. Can this be done?
It is better to be mobile first.
select class for your image. for example hide-mobile. then write these codes:
.hide-mobile
{
display: none;
}
#media only screen and (min-width: 500px) {
.hide-mobile
{
display: block;
}
}
You should take a look at media queries:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
To hide the image, you would need a media query with display:none, which is only included on a low resolution.
#media only screen and (max-width: 500px) {
img {
display: none;
}
}
EDIT: It is not a good idea to define your style inline. You should rather use a seperate css file or at least a <style> block in your header. This helps with controlling different scenarios and keep your styling consistent over multiple objects and pages.
I currently have a responsive image on my website and when I view it on a mobile browser, I get a broken icon (NOTE: viewing on PC in responsive view works!)
HTML:
<div id="headerwrap">
<header class="clearfix">
<div class="container">
<h1><img src="assets/img/headerImage.png"></img></h1>
<p>Welcome to the site!</p>
</div><!-- /container -->
</header>
</div><!-- /headerwrap -->
CSS:
#media (max-width: 979px) {
#headerwrap {
margin-top: -120px;
padding-top:140px;
}
#headerwrap h1 {
font-size: 50px;
line-height: 60px;
letter-spacing: 2px;
}
#headerwrap p {
font-size: 18px;
line-height: 30px;
letter-spacing: 3px;
}
}
#media screen and (max-width: 30.6em) {
.cbp-qtrotator {
font-size: 70%;
}
.cbp-qtrotator img {
width: 80px;
}
}
When I load the page, the image LOADS then after a second or two switches to the broken link. This happens every-time the page is refreshed.
Troubleshooting done so far:
Made sure <meta name="viewport" content="width=device-width, initial-scale=1"> was present
Took the <img> tag out of the <h1> element, still didn't show up. Also moved the image outside of the headerwrap, still nothing
Removed most of the CSS regarding #media (max-width..)
Opened the page on PC, and changed the resolution to the same as my phone, result was that the image DID show up
Viewed the page in Desktop View on my phone, didn't show up.
If anyone can think of something I'm missing here, I'd really appreciate it!
As per #hellojebus the src of the image was being changed by a script I had running in the background.
Rather than the img src showing up as:
<h1><img src="assets/img/headerImage.png"></img></h1>
It loaded as:
<h1><img src="assets/img/headerImage#2x.png"></img></h1>
Resulting in a 404
Thanks again #hellojebus
I've created a HTML page and I'd like to make it responsive.
I've looked at the w3schools but didn't figure out how to make it responsive.
I've just add the line
<meta name=viewport content="width=device-width, initial-scale=1">
but it doesn't make the text responsive. I know I have to add something, but can't figure out what.
Here's my code:
<!doctype html>
<title>Test page</title>
<head>
<meta name=viewport content="width=device-width, initial-scale=1">
<style>
h1 { font-size: 50px; }
body { font: 20px Helvetica, sans-serif; color: #333; background: #eaeaea;text-align: center; padding: 150px;}
article { display: block; text-align: left; width: 650px; margin: 0 auto; }
a { color: #dc8100; text-decoration: none; }
a:hover { color: #333; text-decoration: none; }
</style>
</head>
<article>
<h1>This is a test page</h1>
<div>
<p>
Test page that I made for fun. I would like to be able to code. Send me an email (not working)</p>
<p>— Alessio</p>
</div>
</article>
EDIT:
At the moment I'm playing with the line
<meta name=viewport content="width=device-width, initial-scale=1">
Without this line, the entire text fit on a mobile device, but very small. So the page is zoomed out to fit the screen.
With the line, the text is a good size, but it doesn't fit the screen.
I need something so that I can keep the text size, but make it fit depending on the screen dimension.
I don't want to use library. I'd like to write the code directly in the page (if possible).
EDIT 2:
following the suggestion of #elhampour and #gavgrif I've investigated more the bootstrap. I'm doing a course at freecodecamp.com and now I'm understanding more about this suggestion.
At the moment the code is
<!doctype html>
<title>Coming Soon</title>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
</head>
<div class="container-fluid">
<h1 class="text-primary text-center">We’ll be online soon!</h1>
<img class="img-responsive col-sm-6 col-md-4 col-lg-3" src="https://livetogether.xyz/images/LT-header-alpha-flip.ico" alt="livetogether.xyz">
<p>If you need to you can always contact us, we’ll get back to you shortly!</p>
<p>— LiveTogether Team</p>
</div>
Now I'm looking to make the text responsive
What exactly do you want to add? Comment on my question if the following does not answer your question.
First of all, html pages are already responsive. Your divs will change their size as the page's size changes. Text size cannot be made to fit the screen by default, however you CAN use a library like this: https://plugins.jquery.com/textfill/If you want to, you could have an event in your javascript which will fire when the document's size is changed, or when it is loaded, and it will customize your page for you, based on your input. This would be done by selecting elements individually and setting their .styles.Also, css code can be changed as the page is changed. Look into http://www.w3schools.com/css/css3_mediaqueries.aspGood luck with your project, and have a good day!
You will need to use media queries in your CSS to change the sizings etc in different viewports. The following will set the h1 to a 50px size on screens above 768px and to 30px for screens at or below 768px:
#media (max-width: 768px) {
h1 { font-size: 30px; }
}
#media (min-width: 769px) {
h1 { font-size: 50px; }
}
As mentioned by #elhampour - investigate Bootstrap and then you can change the layout as well as the sizes etc:
<div class="col-sm-6 col-md-4 col-lg-3">
<p>test content 1</p>
</div>
This will display as the full viewport of a mobile (col-xs-), half the width of a small viewport (tablet), a third of a medium viewport (laptop) and a quarter of the larger viewport (descktop screen).
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).
I need to put different images for small device and for large device. I tried to solve it with media query but without any success.
Here is the code:
<div class="small-12 large-4 columns" id="stickSlider"> <br>
</div>
in css file:
#leftSliderImage { background-image: url('img/leftSlider.gif'); width: 324px; height:395}
#media screen and (max-width: 767px)
{
#leftSliderImage { background-image: url('img/smartLeftSlider.png'); width: 543px; height:224px;}
}
p.s: I have another same problem in button : I need to put different button image to each device , How can i do this?
Can you help?
Thanks
Make sure you have a <meta name="viewport" content="width=device-width,initial-scale=1.0">
in the <head> of your HTML. Here's a working demo