I'm using the Bulma CSS Framework and I simply cannot get my site to be as responsive as their homepage.
The site is live. My < html > has the same font-size, and my dom structure is identical to bulma's main page. Yet mine looks awful on mobile.
Here's a snippet of my HTML page:
<html>
<body>
<section class="hero">
<div class="hero-body has-text-centered">
<div class="container">
<div>
<h1 class="title">Tiny Text!</h1>
</div>
</div>
</div>
</section>
</body>
</html>
<html class="route-index">
<body class="layout-default" style="zoom: 1;">
<section class="hero is-medium">
<div class="hero-body has-text-centered">
<div class="container">
<h1 class="title">Somehow big text?</h1>
</div>
</div>
</section>
</body>
</html>
Bulma's page:
My page:
You can test this through developer tools on chrome setting the viewport to mobile on both sites' main pages.
try adding this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
This tells the browser to fit the page to the mobile screen, otherwise it gives you a 'desktop site' which is wider
Related
I use bootstrapemail to make my e-mails. But with I have problems with Gmail Mobile Webmail.
The user-icon must not be shown on mobile devices. But here it is shown in the logo in the header.
It doesn't respond to: display: none;. Also it ignores the col-lg classes of bootstrap-email when the header becomes to small. Can eneyone help me?
This is my code:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
</style>
</head>
<body class="bg-gray-200">
<div class="container">
<!-- Header Begin -->
<div class="w-full p-4 bg-black">
<div class="row">
<div class="col-lg-10">
<!-- Logo of Voetbalshop.nl -->
<img class="h-12 ay-middle" src="#">
</div>
<div class="col-lg-2 ay-middle ax-right">
<!-- User Icon redirect to login page of Voetbalshop.nl when clicked on -->
<a class="no-underline" href="#">
<img class="w-7 d-none d-lg-inline ay-middle" src="#">
</a>
</div>
</div>
</div>
<!-- Header End -->
In the image below tou can see what it looks like now.
Display:none is not supported on Gmail Mobile Webmail (but that's an extremely tiny percentage of people who use that - it is not the Gmail Mobile Apps): https://www.caniemail.com/clients/gmail/#mobile-webmail
It also doesn't support <style> blocks, along with Gmail IMAP (a type of Gmail account used a lot more): https://www.caniemail.com/features/html-style/. So since Bootstrap Email relies on #media queries in the <style> block for responsive behaviour, you won't be able to get responsive classes working in these clients (basically every other mobile client supports it).
You could try adding your own styles like style="width:0;height:0;" (inline on the image) and then adding a custom embedded style to show it in desktops like <style>#media screen and (min-width:600px) {img .d-none {width:50px!important;height:50px!important;} }</style>. (Caveat: there are a couple of less-used desktop applications that don't support the <style> block, and you'll have to do something about Outlook, but you can use their conditional block for that)
I hope you guys can help. I am currently doing an online course in HTML and CSS. As part of my course I am practising making webpages. I am having an issue with a header href.
I am trying to link from the header to a place in the body. However when I am testing on chrome it doesn't appear as a hyperlink. Using the inspect function of chrome shows it as a link and when clicked it works. However it doesnt work outside of inspect.
My HTML is below:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="landing.css">
</head>
<header>
<h1>
Heading
</h1>
<h2>Services </h2>
<div class="tag-line">
</div>
</header>
<body>
<h3>
About
</h3>
<div class="about">
<h4 id="services_section">
<div class="services">
Services
</h4>
<h5>
<div class="contact">
Contact
</h5>
</body>
</html>
The hyperlink is working, the problem is that there is no text. You need to put your "Services" inside the tag.
Change
<h2>Services </h2>
to
<h2>Services</h2>
I wrote a very simple HTML app. The app opens a little loading animation and redirects to a website. Im tested this on my windows phone. The background color should be black. It is black at the start, but when I click on something and the IE loads the page the background is white...
How I can set the background color of the IE loading?
My Html app code :
<!DOCTYPE HTML>
<html>
<head>
<title>Die Witze App</title>
<meta http-equiv="refresh" content="1; url=http://witze.reddoit.de/" />
<link href="stylesheet.css" type="text/css" rel="stylesheet">
<meta name="viewport" content="width=device-width, intial-scale=1.0, maximum-scale=1.0, user-scalable=0">
</head>
<body style="background-color:black">
<!--<p id="ladetext">Die Witze App<p>-->
<div class=ladeanimation>
<div class="windows8">
<div class="wBall" id="wBall_1">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_2">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_3">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_4">
<div class="wInnerBall">
</div>
</div>
<div class="wBall" id="wBall_5">
<div class="wInnerBall">
</div>
</div>
</div>
</div>
</body>
</html>
Take a look at the CSS file, make sure you don't have any background properties in any class or ID selector.
If you dont have any then try adding background-color: #000000; to the ladeanimation class.
I'm using Bootstrap 3.0 panels and trying to figure out why a page is not responsive on mobile devices. It displays properly on a desktop browser, but doesn't view optimized on mobile devices.
The panel examples on the Bootstrap site do indeed display optimized on mobile.
Am I missing something?
Here's the html:
<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<title>a title</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="panel panel-default">
<div class="panel-body">
<div class="media">
<div class="media-body">
<div class="row-fluid">
<div class="row">
<div class="col-md-12"><h1 class="media-heading">This is a heading using h1s.</h1></div>
</div>
</div>
<br>
<div class="row-fluid">
<div class="span4 top-buffer">
</div>
</div>
</div>
</div>
<br>
</div>
</div>
</div>
</div>
</body>
</html>
Looks like you're missing a viewport tag in the head of your HTML. Docs
Like this:
<meta content='maximum-scale=1.0, initial-scale=1.0, width=device-width' name='viewport'>
Except it could be argued that disabling zoom is a bad idea if your text is too small to read, so take care to test it on a variety of devices with different users in mind.
In my jQuery mobile (v 1.2) web site, I have several separate pages (i.e. each page has one header, content and footer). The problem is I can't link the pages. The following line is not working.
Another Page shows "Error loading page".
If I add rel="external" to the <a> element, it works. However, it turns off the automatic loading via Ajax. But I want to use the Ajax loading as well as keep the pages separate. Just wondering whether it's possible.
Code Page 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"> </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page 1</h1>
</div>
<div data-role="content">
click me
</div>
<div data-role="footer">
<h4>Footer content</h4>
</div>
</div>
</body>
</html>
Code Page 2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Single page template</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"> </script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page 2</h1>
</div>
<div data-role="content">
page 2 content
</div>
<div data-role="footer">
<h4>Footer content</h4>
</div>
</div>
</body>
</html>
The problem is that you are trying to load your pages from the filesystem.
Chrome settings prevents that, assuming that a security risk.
Serve your pages with a web server. You can use IIS on Windows XP Pro for that.
or
You can start chrome with --allow-file-access-from-file command line option
I believe you are supposed to give each 'data-role="page" and id like "page2 so in effect it would be:
<div data-role="page" id="page"> <!--Home Page-->
<div data-role="page" id="page2"> <!--2nd Page-->
<div data-role="page" id="page3"> <!--3rd Page-->
Im not sure if that is what you are looking for in this case though...