I have created the following page, to inform users that their browser is outdated.
table,
.modal-footer a {
margin-left: auto;
margin-right: auto;
}
td {
width: 60px;
text-align: center;
color: #1a73e8;
}
a.browser-icon {
width: 36px;
height: auto;
img {
width: 32px;
height: auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(window).on('load', function() {
$('#outdatedBrowserModal').modal('show');
});
</script>
<style>
</style>
</head>
<body>
<div class="container">
<div class='modal fade' id='outdatedBrowserModal' tabindex='-1' role='dialog' aria-hidden='true' data-backdrop="static" data-keyboard="false">
<div class='modal-dialog modal-dialog-centered' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<h5 class='modal-title'>YOUR BROWSER IS OUT-OF-DATE!</h5>
</div>
<div class='modal-body'>
<p>
To continue using the site please use an up-to-date browser such as:
</p>
<table>
<tr>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/chrome.svg' alt='Chrome' title='Chrome'></a>
</td>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/safari.svg' alt='Safari' title='Safari'></a>
</td>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/firefox.svg' alt='Firefox' title='Firefox'></a>
</td>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/edge.svg' alt='Edge' title='Edge'></a>
</td>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/opera.svg' alt='Opera' title='Opera'></a>
</td>
</tr>
<tr>
<td>Chrome</td>
<td>Safari</td>
<td>Firefox</td>
<td>Edge</td>
<td>Opera</td>
</tr>
</table>
</div>
<div class="modal-footer">
UPDATE MY BROWSER NOW
</div>
</div>
</div>
</div>
</div>
</body>
</html>
The problem is that the page does not show properly in Internet Explorer, as shown below:
Is there any other way to center the footer button?
Give it a parent div and set the button as display: block; and center it using margin: 0 auto;
I think this only needs to adjust the position of the <a> element in the modal-footer through the translateX attribute, like this:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<style>
table {
margin-left: auto;
margin-right: auto;
}
td {
width: 60px;
text-align: center;
color: #1a73e8;
}
a.browser-icon {
width: 36px;
height: auto;
}
img {
width: 32px;
height: auto;
}
.modal-footer a {
transform: translateX(-50%);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(window).on('load', function () {
$('#outdatedBrowserModal').modal('show');
});
</script>
</head>
And this is result in IE:
You can use the transform property to center it, if you give the element any position but static (I used relative in this case).
table,
.modal-footer a {
margin-left: auto;
margin-right: auto;
}
.modal-footer {
position: relative;
left: 50%;
transform: translateX(-50%);
}
td {
width: 60px;
text-align: center;
color: #1a73e8;
}
a.browser-icon {
width: 36px;
height: auto;
img {
width: 32px;
height: auto;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(window).on('load', function() {
$('#outdatedBrowserModal').modal('show');
});
</script>
<style>
</style>
</head>
<body>
<div class="container">
<div class='modal fade' id='outdatedBrowserModal' tabindex='-1' role='dialog' aria-hidden='true' data-backdrop="static" data-keyboard="false">
<div class='modal-dialog modal-dialog-centered' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<h5 class='modal-title'>YOUR BROWSER IS OUT-OF-DATE!</h5>
</div>
<div class='modal-body'>
<p>
To continue using the site please use an up-to-date browser such as:
</p>
<table>
<tr>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/chrome.svg' alt='Chrome' title='Chrome'></a>
</td>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/safari.svg' alt='Safari' title='Safari'></a>
</td>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/firefox.svg' alt='Firefox' title='Firefox'></a>
</td>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/edge.svg' alt='Edge' title='Edge'></a>
</td>
<td>
<a class='browser-icon'>
<img src='https://www.shopless.co.nz/images/icons/opera.svg' alt='Opera' title='Opera'></a>
</td>
</tr>
<tr>
<td>Chrome</td>
<td>Safari</td>
<td>Firefox</td>
<td>Edge</td>
<td>Opera</td>
</tr>
</table>
</div>
<div class="modal-footer">
UPDATE MY BROWSER NOW
</div>
</div>
</div>
</div>
</div>
</body>
</html>
To make this come in center u can bound it by center tag like this:
<center>
<div class="modal-footer">
UPDATE MY BROWSER NOW
</div>
</center>
This shall work in every browser
Related
How come whenever I turn on or off my adblock my paragraph/text changes positions. When I turn on adblock and the ads are off the paragraph goes all the way at the bottom, and when I turn off adblock where the ads are on the paragraph changes and goes to a place where I want it to be but I want it to stop moving positions whenever I turn on/off adblock I just want it to stay in one place.
here's my webpage
.Copyright {
width: 700px;
height: 177px;
margin-top: 1895px;
margin-left: 615px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="https://adventureplus.ca/webicon.ico" type="image/icon">
</head>
<head>
<link rel="stylesheet" type="text/css" href="aboutstyle.css">
</div>
<link rel="stylesheet" href="aboutstyle.css">
</head>
<body class="aboutbg">
<body>
<div>
<img src="adventureplusbodypage.jpg" class="bodypage" alt="ed">
<link rel="stylesheet" type="text/css" href="aboutstyle.css">
</div>
</body>
<div class="main">
<a href="index.html">
<p align="center"> <img src="new adpluslogo.png" class="Pluslogoon" alt="HTML Tutorial"></a>
</p>
<div class="menu">
<div>
<img src="new navbar.png" class="nav" alt="nav">
</div>
<img src="Aboutbar.png" class="Aboutbar" alt="about">
<img src="Archivebar.png" class="Archivebar" alt="archive">
<img src="Extrasbar.png" class="Extrasbar" alt="extras">
<img src="Charactersbar.png" class="Charactersbar" alt="characters">
</div>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
<link rel="stylesheet" type="text/js" href="jsabout.js">
</body>
<div>
<img src="friends, graduations , and begininigs part 86.jpg" class="Part99" alt="img">
<link rel="stylesheet" type="text/css" href="Navi.css">
</div>
<div>
<img src="aboot.jpg" class="Acrbar" alt="img">
<link rel="stylesheet" type="text/css" href="Navi.css">
</div>
<head>
<div>
Previous »
Next »
</div>
</head>
<div>
<img src="ben banner.jpg" class="bensbanner" alt="mn">
<link rel="stylesheet" type="text/css" href="Other.css">
</div>
<div>
<a href="https://twitter.com/Anonymisartist?lang=en">
<img src="twitterlogo.png" class="Twat" alt="img">
</a>
</div>
<div>
<a href="https://www.deviantart.com/sanrokk?rnrd=258670">
<img src="deviantartloglo.png" class="deviant" alt="img">
</a>
</div>
<div>
<a href="https://instagram.com/anonymisartist/?hl=en">
<img src="instalogo.png" class="insta" alt="img">
</a>
</div>
<div>
<head>
<div id="disqus_thread" style="height: 538px; width: 1200px; margin-left: -415px; margin-top: -247px">
<script>
var disqus_config = function() {
this.page.url = 'https://adventureplus.ca/January202020.html';
this.page.identifier = 'January202020.html';
};
(function() {
var d = document,
s = d.createElement('script');
s.src = 'https://adventureplus-ca.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<link rel="stylesheet" type="text/css" href="Navi.css">
</ul>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
</div>
</div>
</div>
</head>
</script>
<div>
<link rel="stylesheet" type="text/css" href="Other.css">
<div class="Commentary">
<h1>Hi Guys</h1>
<p>Welcome to my site. This is where I will be posting lots of ADplus content and plus more juicy stories. Just sit back and relax and enjoy the fun "adventures" of this webcomic has to offer. The comic updates every weekdays. Stay tuned for more updates
soon to come :).</p>
</div>
<noscript>Please enable JavaScript to view the comments powered by Disqus.</noscript>
<link rel="stylesheet" type="text/js" href="jsabout.js">
</body>
</div>
</head>
<div>
<img src="placeholder.jpg" alt="img" class="adone">
<link rel="stylesheet" type="text/css" href="aboutstyle.css">
</div>
<div>
<img src="adtwo.jpg" class="adstwo" alt="i">
<link rel="stylesheet" type="text/css" href="aboutstyle.css">
</div>
</div>
<head>
<style type="text/css">
.adslot_1 {
max-width: 190px;
max-height: 772px;
}
#media (min-width:193px) {
.adslot_1 {
width: 193px;
height: 770px;
}
}
#media (min-width:193px) {
.adslot_1 {
width: 193px;
height: 770px;
}
}
</style>
<ins class="adsbygoogle adslot_1" style="display: block; position:relative;margin-top: -1469px; margin-left: 315px; width: 160px; max-height: 600px;" data-ad-client="ca-pub-9710909156400610" data-ad-slot="5003175748"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</head>
<body>
<style type="text/css">
.adslot_2 {
max-width: 728px;
max-height: 93px;
}
#media (min-width:728px) {
.adslot_2 {
width: 728px;
height: 93px;
}
}
#media (min-width:728px) {
.adslot_2 {
width: 728px;
height: 93px;
}
}
</style>
<ins class="adsbygoogle adslot_2" style="display: block; position: relative; margin-top: -869px; margin-left: 725px; width: 728px; height: 93px;" data-ad-client="ca-pub-9710909156400610" data-ad-slot="5873404284"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
</body>
<div>
<head>
<div>
<link rel="stylesheet" type="text/css" href="Other.css">
<div class="Copyright">
<p>© 2019–2020 AdventurePlus Comics Created By Nathaniel Enriquez</p>
</div>
</head>
</div>
</html>
output:
Image of Adblock On
Image of Adblock Off
Image of Adblock On
I am using a fixed sidebar for my page and I am using bootstrap to make it responsive design. However, when I try different screen resolution, my content is going out of the screen rather than going down to the first div. Please see the screenshot for the more easy explanation.
I tried everything possible still nothing worked. Attached is screenshot for problem, and my code.
Expected Output: (1440px works fine)
Error : (1024px does not work)
Works : (954px works)
HTML :
<!doctype html>
<html lang="en">
<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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="header_wrapper"></div>
</header>
<div class="sidebar">
<div class="container">
<div class="row">
<div style="height: 70px;background: #5bd495;"></div>
</div>
</div>
</div>
<section>
<div class="wrapper">
<div class="container" style="padding-top:50px;">
<div class="row">
<div class="col-md-7">
<div class="form_container" style="height:600px;background:#d69c9c; border:2px solid #000000;"></div>
</div>
<div class="col-md-5">
<div class="form_container" style="height:600px;background:#96e09e;border:2px solid #000000;"></div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
CSS :
html, body {
overflow-x : hidden;
}
.header_wrapper {
height: 70px;
background: #fff;
}
.sidebar {
background-color: #fff;
bottom: 0;
top: 0;
overflow: hidden;
width: 180px;
display: flex;
height: 100%;
position: fixed;
filter: drop-shadow(-5px 0px 10px #B0DFC0);
}
.wrapper {
background: #F1FAF4;
padding-left: 200px;
min-height: 100vh;
width: 100%;
}
.form_container {
background: #ffffff;
border-radius: 5px;
padding: 20px 30px;
filter: drop-shadow(0px 5px 15px #B0DFC0);
margin-bottom: 70px;
}
Any help will be appreciated.
I changed div container with div wrapper and that did it.
https://jsfiddle.net/jee7384b/13/
<!doctype html>
<html lang="en">
<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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="header_wrapper"></div>
</header>
<div class="sidebar">
<div class="container">
<div class="row">
<div style="height: 70px;background: #5bd495;"></div>
</div>
</div>
</div>
<section>
<div class="container" style="padding-top:50px;">
<div class="wrapper">
<div class="row">
<div class="col-md-7">
<div class="form_container" style="height:600px;background:#d69c9c; border:2px solid #000000;"></div>
</div>
<div class="col-md-5">
<div class="form_container" style="height:600px;background:#96e09e;border:2px solid #000000;"></div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
Also, you should style everything in the css file.
<html>
<head>
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="MY_CLIENT_ID_ON_GOOGLE_DEV.apps.googleusercontent.com">
<!-- To integrate Google Sign-in -->
<script src="https://apis.google.com/js/api.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
<div class="g-signin2" data-onsuccess="onSignIn"></div>
</body>
</html>
It is not displayed.
What's wrong with this HTML snippet? Do I have to do something else to display the Google sign-in button?
If you use Bootstrap v4, you can get a nice-looking button like the one below with something like:
<div class="row">
<div class="col-md-3">
<a class="btn btn-outline-dark" href="/users/googleauth" role="button" style="text-transform:none">
<img width="20px" style="margin-bottom:3px; margin-right:5px" alt="Google sign-in" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png" />
Login with Google
</a>
</div>
</div>
<!-- Minified CSS and JS -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous">
</script>
This is an elegant solution I came up with using materializecss.
Code
<div class="col s12 m6 offset-m3 center-align">
<a class="oauth-container btn darken-4 white black-text" href="/users/google-oauth/" style="text-transform:none">
<div class="left">
<img width="20px" style="margin-top:7px; margin-right:8px" alt="Google sign-in"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png" />
</div>
Login with Google
</a>
</div>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
CHECK: https://developers.google.com/identity/sign-in/web/build-button
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css">
<script src="https://apis.google.com/js/api:client.js"></script>
<script>
var googleUser = {};
var startApp = function() {
gapi.load('auth2', function(){
// Retrieve the singleton for the GoogleAuth library and set up the client.
auth2 = gapi.auth2.init({
client_id: 'YOUR_CLIENT_ID.apps.googleusercontent.com',
cookiepolicy: 'single_host_origin',
// Request scopes in addition to 'profile' and 'email'
//scope: 'additional_scope'
});
attachSignin(document.getElementById('customBtn'));
});
};
function attachSignin(element) {
console.log(element.id);
auth2.attachClickHandler(element, {},
function(googleUser) {
document.getElementById('name').innerText = "Signed in: " +
googleUser.getBasicProfile().getName();
}, function(error) {
alert(JSON.stringify(error, undefined, 2));
});
}
</script>
<style type="text/css">
#customBtn {
display: inline-block;
background: white;
color: #444;
width: 190px;
border-radius: 5px;
border: thin solid #888;
box-shadow: 1px 1px 1px grey;
white-space: nowrap;
}
#customBtn:hover {
cursor: pointer;
}
span.label {
font-family: serif;
font-weight: normal;
}
span.icon {
background: url('/identity/sign-in/g-normal.png') transparent 5px 50% no-repeat;
display: inline-block;
vertical-align: middle;
width: 42px;
height: 42px;
}
span.buttonText {
display: inline-block;
vertical-align: middle;
padding-left: 42px;
padding-right: 42px;
font-size: 14px;
font-weight: bold;
/* Use the Roboto font that is loaded in the <head> */
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body>
<!-- In the callback, you would hide the gSignInWrapper element on a
successful sign in -->
<div id="gSignInWrapper">
<span class="label">Sign in with:</span>
<div id="customBtn" class="customGPlusSignIn">
<span class="icon"></span>
<span class="buttonText">Google</span>
</div>
</div>
<div id="name"></div>
<script>startApp();</script>
</body>
</html>
In a single line (result):
<button type="button" style="background:#4285f4; color:white; border:none; width:110px; height:40px; border-radius:3%;"><img src="https://www.iconfinder.com/data/icons/social-media-2210/24/Google-512.png" style="width:30px; background:white; border-radius:50%;" alt=""><b style="top: -10px; left: 5px; position: relative">Google</b></button>
If you happen to use Foundation:
<div>
<a class="hollow button primary" href="#">
<img width="15px" style="margin-bottom:3px; margin-right:5px" alt="Google login" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png" />
Sign in with Google
</a>
</div>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
onClick={handleGoogleLogin}
>
<img
width="20px"
style={{ marginBottom: "3px", marginRight: "5px" }}
alt="Google sign-in"
src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png"
/>
Login with Google
</Button>
enter image description here
I'm creating a small site that I want to keep its design in the tablet/mobile version as well. This is what I have:
Jsfiddle example
This is what I want:
Centered - in the middle of the page:
And when I resize the window the image and text to resize as well, and when they cannot fit on the same line to go like this:
I managed to do something similar but when i resize the window the image and text goes one over the other and then the text goes on the 2nd row.
Code:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
<div class="row">
<div class=" s12 m4 l3">
<img src = "http://lh3.googleusercontent.com/jN9tX6dCJ6_XL9E4K1KCO2Tuwe9_rYUbwv723eu6XGI0PWGLcPs0259VscOu249PPKKcU5AOXrq6JnleEaoK6K_JvZ2PY9lw3pMApzOpTQ=s660" height="111" width="300"/>
</div>
<div class=" s12 m4 l3">
<h4> This is an example of, <br> image and text on the same line </h4>
</div>
</div>
I followed what other people suggested in other posts, but their suggestion messed up my design.
https://jsbin.com/cavuracegu/1/edit?html,css,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<div class="container">
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12 col-lg-12" style="display: table;position: absolute;height: 100%;width: 100%;">
<div style="display: table-cell;vertical-align: middle;">
<img style="display: inline-block" src = "http://lh3.googleusercontent.com/jN9tX6dCJ6_XL9E4K1KCO2Tuwe9_rYUbwv723eu6XGI0PWGLcPs0259VscOu249PPKKcU5AOXrq6JnleEaoK6K_JvZ2PY9lw3pMApzOpTQ=s660" width="50%"/>
<h4 class="text" style="width: 45%;display: inline-block;word-wrap:break-word;"> This is an example of, image and text on the same line </h4>
</div>
</div>
</div>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
</div>
</body>
</html>
<style>
#media (max-width: 600px) {
.text {
font-size: 14px;
}
}
.text {
vertical-align: middle;
}
</style>
The final code (tested on JsFiddle):
#media only screen and (max-width: 780px){
:not(h4){
text-align: center;
}
body .s12{
position: relative;
display: inline-block;
vertical-align: top;
font-size: 25px;
margin-top: 0%;
text-align: left;
}
#div1{
margin-top: 20%;
}
}
:not(h4){
text-align: center;
}
.s12{
position: relative;
display: inline-block;
vertical-align: top;
text-align: left;
margin-top: 20%;
}
<html>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
<div class="row">
<div class=" s12 m4 l3" id="div1">
<img src = "http://lh3.googleusercontent.com/jN9tX6dCJ6_XL9E4K1KCO2Tuwe9_rYUbwv723eu6XGI0PWGLcPs0259VscOu249PPKKcU5AOXrq6JnleEaoK6K_JvZ2PY9lw3pMApzOpTQ=s660" height="111" width="300"/>
</div>
<div class=" s12 m4 l3" id="div2">
<h4> This is an example of image, <br> with text on the same line </h4>
</div>
</div>
</body>
</html>
I am working on a small project of mine.
It's a website for booking tours.
I'm still in the early stages, but this is what it looks like:
homepage
As you can see, each tour has his own "div" divided in 3 columns: A preview image, a short description and a button to book the tour.
I can easily add an image as a background, but if I shrink the page to a size like that from a mobile, a second div appears above the first one with the image in it, like this:
homepage mobile size
I have no idea why this occurs. Do any of you have any idea how to make the div for the image disappear on mobile or how to solve this problem?
HTML and CSS code is provided below, I am using bootstrap.
PS: Ignore the white-space around the button.
body {
margin: 0px;
padding: 0px;
}
.jumbotron {
border-radius: 0px;
margin-bottom: 0px;
}
.options {
margin-top: 30px;
}
.tours {
padding: 0px;
margin-bottom: 25px;
border-radius: 5px;
border: 1px solid grey;
max-width: 100%;
height: 20vh;
}
.preview-img {
height: 100%;
}
.short-descr {
padding-top: 2vh;
height: 100%;
background-color: red;
}
.more-info {
height: 100%;
padding: 0px;
}
.infobtn {
height: 100%;
width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>
<html lang="en">
<head>
<title>home</title>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script type="text/javascript" src="js/bootstrap-datepicker.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/datepicker.css">
<link rel="stylesheet" type="text/css" href="css/homepage-style.css">
</head>
<body>
<!--Jumbotron, header for the website-->
<div class="jumbotron text-center">
<div class="container">
<h1>Title</h1>
<p>Description</p>
</div>
</div>
<!--These are the columns in which the tours are displayed-->
<div class="container options">
<div class="col-xs-12 tours">
<div class="col-sm-3 preview-img">
</div>
<div class="col-xs-9 col-sm-7 short-descr">
<h4 class="text-left">Column 1</h4>
<p class="text-left">Lorem Ipsum Dolor Sit Amet...</p>
</div>
<div class="col-xs-3 col-sm-2 more-info">
<button type="button" class="btn btn-info infobtn" href="#">More</button>
</div>
</div>
<div class="col-xs-12 tours">
</div>
<div class="col-xs-12 tours">
</div>
</div>
</body>
</html>
Add hidden-xs class to your preview-img div
http://getbootstrap.com/css/#responsive-utilities