Using the official Twitter widget to embed a feed into a website: on iPad the whole page temporarily shifts to the right with a large grey border appearing on the left when scrolling the Twitter feed (tested in Safari and Chrome) on iPad version 11.4.1. it works fine on desktop. Any ideas?
Basic stripped back HTML code is:
<!DOCTYPE html>
<html lang="EN">
<head>
<meta charset="UTF-8"/>
<title></title>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
</script>
<![endif]-->
<link href="style.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!-- can use for nivoslider alone -->
</head>
<body>
<div id="container">
<main>
<a class="twitter-timeline" data-width="450" data-height="600" href="https://twitter.com/TwitterDev?ref_src=twsrc%5Etfw">Tweets by TwitterDev</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</main>
</div>
</body>
</html>
& CSS:
body {
margin: 0;
padding: 0;
color: #333233;
font-family: Arial, Verdana, sans-serif;
font-size: 16px;
line-height: 1.6em;
background: #eee; }
html, body {height: 100%;}
container { overflow:hidden; min-height: 100%; position: relative; }
OK, so it seems that latest Twitter widget for embedding into an HTML5 website is not backwards compatible with iPad V.11.4.1 (Safari or Chrome). The official Twitter link causes same issue on same iPad. So guess that's it - no solution!
Related
his is the CSS code that I already have in place for fixed-sized buttons. I want to increase the size of the icon inside of these buttons. The style of the button is |text + icon|. Thank you
.nectar-button.fixed-size {
width: 250px;
height: 75px;
font-size: 18px;
line-height: 30px;
}
give another class name on icon tag and give css like:
.fa-home{font-size: 20px;}
.btn{font-size: 15px;color: black;background-color: orange;}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>demo</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css" media="screen">
.fa-home{font-size: 20px;}
.btn{font-size: 15px;color: black;background-color: orange;}
</style>
</head>
<body>
<button class="btn"><i class="fa fa-home"></i> Home</button>
</body>
</html>
try these code, I think your problem will be solved, Thank you.
I am trying to display an image on a mock webpage I'm building as a background image. When I try using the css background-image and url it will not load. I am trying to put the image as a background image on the header section under the header class, but it just won't load. Whne I hover over the path in brackets it brings up a thumbnail of the image, so I know it can access it.
I have tried everything - moving the file, renaming the file, checked my paths are correct, using and removing quote marks, backslashes, forward slashes, checking my css path is correct in my head section, checking the file extension. When I click on the file name in the console 'sources' section and select open in new window it brings the image up in a new window just fine, but Chrome or any other browser won't seem to load the file for some reason?!
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'Raleway', sans-serif;
font-weight: 300;
font-size: 20px;
}
header {
background-image: url(resources/img/table_window.jpg);
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,400i,700" rel="stylesheet">
<title>Phil My Glass</title>
</head>
<body>
<header>
<div class="top-section">
</div>
</header>
</body>
</html>
The file loads and displays just fine if I put it into the HTML using an img tag, but won't display from css.
You just need to specify a height for your header - as it was just defaulting to 0 pixels high :-)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'Raleway', sans-serif;
font-weight: 300;
font-size: 20px;
}
header {
background-image: url(https://picsum.photos/200/300);
height: 100px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:300,400,400i,700" rel="stylesheet">
<title>Phil My Glass</title>
</head>
<body>
<header>
<div class="top-section">
</div>
</header>
</body>
</html>
I'm working on my first CSS design and I'm having an issue where the background for the header extends past the right of the header.
MWE:
header{
background-color: #FF0000;
padding: 20px;
}
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<link rel="stylesheet" href="reset.css"/>
<link rel="stylesheet" href="ArtStoreInitial.css"/>
<link href="https://fonts.googleapis.com/css?family=Six+Caps"
rel="stylesheet">
<meta charset="utf-8">
<title>Hypothetical Art Store</title>
</head>
<body>
<header>
<h1>Hypothetical Art Store</h1>
<h2>Super cool tagline will go here</h2>
</header>
If I use display: inline;, it breaks the header completely.
Is there a way to wrap it, give it a margin and give it padding all at the same time? Do I have to hard-code the size? That doesn't seem right.
edit:
box-sizing set to border-box or content-box does nothing
Set the display property to inline-block
header {
background-color: #FF0000;
padding: 20px;
display: inline-block;
}
<header>
<h1>Hypothetical Art Store</h1>
<h2>Super cool tagline will go here</h2>
</header>
I am creating this simple html page... everything seems to work fine. But when I came to link my css to my html. Nothing happens and I made sure I save everything, nothing happens to my webpage. Can you check my code below and see if there is any problems thanks.
HTML:
<html>
<head>
<title>What if?</title>
<meta http-equiv="What if" content="text/html; charset=uft-8"/>
<img src="images/Logo.jpg" height="300" width="400"/>
<link rel="stylesheet" type="text/css" href="styles.css"/>
</head>
<body>
<header>
<h1>What if</h1>
</header>
</body>
</html>
My CSS:
body {
font-family : Verdana, Arial, sans-serif;
font-size : medium;
}
h1 {
<center></center>
background-color: #CCCCCC;
color: #000000;
}
Also Don't use <img> tag into <head> section. <img> tag should be in <body> section.
I am currently learning polymer and I am struggling with one of the example on the Polymer website. The example is this one : https://www.polymer-project.org/1.0/toolbox/app-layout#condensing-header.
My index.html is the same as the one in the Sample toolbars section, I have just replaced the body with the one in the Condensing Header.
Here is the code:
<!DOCTYPE html>
<html>
<head>
<!-- import latest release version of all components from polygit -->
<base href="https://polygit.org/components/">
<script src="webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="app-layout/app-header/app-header.html">
<link rel="import" href="app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="paper-tabs/paper-tabs.html">
<!-- sample-content included for demo purposes only -->
<link rel="import" href="app-layout/demo/sample-content.html">
<style is="custom-style">
body {
/* No margin on body so toolbar can span the screen */
margin: 0;
}
app-toolbar {
/* Toolbar is the main header, so give it some color */
background-color: #1E88E5;
font-family: 'Roboto', Helvetica, sans-serif;
color: white;
--app-toolbar-font-size: 24px;
}
</style>
</head>
<body>
<app-header id="header" effects="waterfall" fixed condenses>
<app-toolbar>
<div title>Left</div>
<div title>Title</div>
<div title>Right</div>
</app-toolbar>
<paper-tabs selected="0" primary>
<paper-tab>Food</paper-tab>
<paper-tab>Drink</paper-tab>
<paper-tab>Life</paper-tab>
</paper-tabs>
</app-header>
</body>
</html>
To make things easier: Plunker
In the Polymer tutorial, Left / Title / Right are resp. on the left, center and right of the header but in my version, they are all on the left. Any idea why ?
Thanks