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
Related
I've searched the internet high and low here, but cannot find the answer. Basicaly, my styling looks as intended on desktop and tablet view. Some elements stay styled as they should, but most have not in mobile view. I have made sure that I have added <meta name="viewport" content="width=device-width, initial-scale=1">in my head tag, and the path to my CSS sheet is correct (as other screen sizes are styled correctly).
I have been able to make the changes I want to in Dev tools (on Firefox), but when I add the same values (in and and out of a media query) they do not appear to do anything as when I save and refresh my page it reverts back to the incorrect styling.
Does anyone know what I can do differently or add to my code to help? Thank you in advance.
EDIT: here is a snippet of my HTML and corresponding CSS
h2 i {
color: #fafafa;
}
.profile-text {
padding: 100px;
}
.profile-text p {
font-size: 18px;
}
.about {
padding-top: 10px;
}
img {
vertical-align: middle;
border-style: none;
width: 100%;
}
.photo {
height: 50%;
overflow: hidden;
}
.contact-info {
background-color: #c158dc;
text-align: center;
color: #fafafa;
}
.contact-info .value {
padding-left: 20px;
}
.value {
margin-bottom: 10px;
font-size: 18px;
}
<div class="row no-gutters">
<div class="col-md-4 contact-info">
<div class="photo">
<img src="assets/images/bratislava-sm.JPG" alt="profile image">
</div>
<div class="upper value">
<p>Amy H</p>
</div>
<div class="value">
<p><i class="fas fa-map-marker-alt"></i> text here</p>
</div>
<div class="value">
<p><i class="fas fa-phone-alt"></i> text here</p>
</div>
<div class="value">
<p><i class="fas fa-envelope-open-text"></i> test here</p>
</div>
</div>
Without more information, it's impossible to tell what's going on. Some possible things to check:
Make sure you're using cachebusting and that your mobile device isn't just showing an old cached version.
You can apply an obvious style rule to make sure your changes are being applied, like background: red;.
You can use Chrome or Safari's remote device inspection to inspect the page on your mobile device, if it's connected via usb to your computer. Try it at chrome://inspect
So after talking to one of my tutors, it turns out that I had opened a media query further up my CSS file, and in my editing I deleted the closing curly brace. All these issues caused by one little }
So if anyone else has the meta tag in and sill struggling, check all your curly braces are closed.
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 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.
Many pages on sites I run have localised links in the form of http://www.site.co.uk/index.php#calendar. These work as expected - taking the browser to the calendar part of the web page index.php in IE and Chrome, however the newer versions of Firefox seem to have an issue in that they are only displaying the chosen id area on the page.
For example; I have a page with the following HTML content (assume name is index.php ):
<!DOCTYPE html>
<html class="no-js" lang="en-GB">
<head>
<meta charset="utf-8">
<title>Control Panel</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<link rel="canonical" href="http://www.site.co.uk/avail/index.php" >
<!-- JAVASCRIPTS -->
<script src="/includes/js/jquery-1.11.0.min.js"></script>
<!-- STYLE SHEETS -->
<link rel="stylesheet" href="/includes/css/normalize.css">
<link rel="stylesheet" href="/includes/css/sitewide.css">
<link rel="stylesheet" href="/includes/css/control.css">
</head>
<body>
<main>
<nav>...</nav>
<h1>A Heading</h1>
<section>
<h2>Heading H2 one</h2>
<p>some text</p>
<p>some more text</p>
<p>Bulking text, etc etc etc.</p>
</section>
<section>
<h2><a id='text1'></a>Section 2</h2>
<p>some text</p>
<p>some more text</p>
<p>Bulking text, etc etc etc.</p>
</section>
</main>
</body>
</html>
So, when the page is visited at index.php then the whole page - 2 headers and 6 paragraph blocks - are displayed. When the page is visited with index.php#text1 only the second header and paragraph blocks are displayed on Firefox.
I have noticed this across several different sites on HTML5. Some points:
The rendering of the page only begins at the DOM level the id tag occurs. such as if the id tag occurs in a <section> then only that section and all parent elements are displayed.
This is not effected by the deprecated anchor name attribute.
This is not effected by where or in what element the id tag is positioned.
This effect does not seem to be influenced by CSS/JS base stylers such as normalize.css or bootstrap. There is a minor difference in modernizer where the page loads with the problem but then refreshing the page displays the whole page but does not focus the browser window on the id tag area.
When viewing the site through Firebug the entire site source code is present (but is not displayed), firebug also does not seem to show any display:none; that I have found.
My pages are W3C HTML5 valid according to the Nu-HTML checker linked from W3C validator.
So, to conclude:
After reading this can you tell me how to side step or even solve this issue? Or if there is some syntax mistake I've made that's causing this issue, What can I do to correct this behaviour?
Finally: A test page featuring the problem as it presents itself to me can be found here on a test site page: http://www.walberswick.org.uk/index.php
The problem seems to be with your css. On click you get some weird overflow bug in all browsers. I played for awhile with it and after changing these:
#media only screen and (min-width: 801px)
.leftSideText {
padding: 2px 2px 2500px 2px;
margin-bottom: -2500px;
float: left;
width: 48%;
}
#media only screen and (min-width: 801px)
.imgSideText {
padding: 1px 1px 2500px 1px;
margin-bottom: -2500px;
float: right;
width: 48%;
}
to these:
#media only screen and (min-width: 801px)
.leftSideText {
padding: 2px 2px 2500px 2px;
display: inline-block;
width: 48%;
}
#media only screen and (min-width: 801px)
.imgSideText {
padding: 1px 1px 2500px 1px;
display: inline-block;
width: 48%;
vertical-align: top;
}
all worked fine.
A thing to note. Use display: property instead of float: property or flexbox. Make sure to have only one main element per page and include it's role="main".
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).