How do i make the text go under the image in mobile?
Question
<!DOCTYPE html>
<html amp lang="en">
<head>
<meta charset="utf-8" />
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Reliant Industrial Supply</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link
rel="canonical"
href="https://http://www.reliantindustrialsupply.com/"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Work+Sans:300,600"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Sora:wght@200&display=swap"
/>
<meta
name="viewport"
content="width=device-width,minimum-scale=1,initial-scale=1"
/>
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"headline": "Open-source framework for publishing content",
"datePublished": "2015-10-07T12:02:41Z",
"image": ["logo.jpg"]
}
</script>
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both;
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
@keyframes -amp-start {
from {
visibility: hidden;
}
to {
visibility: visible;
}
}
</style>
<noscript
><style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
}
</style></noscript
>
<style amp-custom>
:root {
--background: rgba(299, 299, 299, 0.95);
}
*,
*::before,
*::after {
box-sizing: border-box;
font-family: "Work Sans";
}
/* navigation styles start here */
.header {
background: var(--background);
text-align: center;
position: fixed;
z-index: 999;
width: 100%;
}
.nav-toggle {
position: absolute;
top: -9999px;
left: -9999px;
}
.nav-toggle:focus ~ .nav-toggle-label {
outline: 3px solid rgba(lightblue, 0.75);
}
.nav-toggle-label {
position: absolute;
top: 0;
left: 0;
margin-left: 1em;
height: 100%;
display: flex;
align-items: center;
}
.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
display: block;
background: black;
height: 2px;
width: 2em;
border-radius: 2px;
position: relative;
}
.nav-toggle-label span::before,
.nav-toggle-label span::after {
content: "";
position: absolute;
}
.nav-toggle-label span::before {
bottom: 7px;
}
.nav-toggle-label span::after {
top: 7px;
}
nav {
position: absolute;
text-align: left;
top: 100%;
left: 0;
background: var(--background);
width: 100%;
transform: scale(1, 0);
transform-origin: top;
transition: transform 400ms ease-in-out;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
margin-bottom: 1em;
margin-left: 1em;
}
nav a {
color: black;
text-decoration: none;
font-size: 1.2rem;
text-transform: uppercase;
opacity: 0;
transition: opacity 150ms ease-in-out;
}
nav a:hover {
color: #000;
}
.nav-toggle:checked ~ nav {
transform: scale(1, 1);
}
.nav-toggle:checked ~ nav a {
opacity: 1;
transition: opacity 250ms ease-in-out 250ms;
}
amp-carousel {
padding-top: 20em;
}
@media screen and (min-width: 800px) {
.nav-toggle-label {
display: none;
}
.header {
display: grid;
grid-template-columns: 1fr auto minmax(600px, 3fr) 1fr;
}
.logo {
grid-column: 2 / 3;
}
nav {
position: relative;
text-align: left;
transition: none;
transform: scale(1, 1);
background: none;
top: initial;
left: initial;
grid-column: 3 / 4;
display: flex;
justify-content: flex-end;
align-items: center;
}
nav ul {
display: flex;
}
nav li {
margin-left: 3em;
margin-bottom: 0;
}
nav a {
opacity: 1;
position: relative;
}
nav a::before {
content: "";
display: block;
height: 5px;
background: black;
position: absolute;
top: -0.75em;
left: 0;
right: 0;
transform: scale(0, 1);
transition: transform ease-in-out 250ms;
}
nav a:hover::before {
transform: scale(1, 1);
}
}
amp-carousel {
top: 0em;
padding-bottom: 5em;
}
.content {
background-color: dark-grey;
}
.Centered {
text-align: center;
font-family: "Work Sans";
font-style: normal;
font-weight: 300;
padding-bottom: 2em;
}
.left {
margin: 2rem;
font-family: 'Sora', sans-serif;
font-style: normal;
font-weight: 300;
}
.clearfix {
overflow: auto;
display: flex;
padding-bottom: 5em;
}
.footer {
width: 100vw;
display: block;
overflow: hidden;
padding: 20px 0;
box-sizing: border-box;
background-color: #18181a;
}
.innerFooter {
display: block;
margin: 0 auto;
width: 1100px;
height: 100%;
}
.innerFooter .logoContainer {
width: 35%;
float: left;
height: 100%;
display: block;
}
.innerFooter .footerThird {
padding-left: 20px;
width: calc(21.66666667 - 20px);
margin-right: 10px;
float: left;
height: 100%;
}
.innerFooter .footerThird:last-child {
margin-right: 0;
}
.innerFooter .footerThird h1{
font-family: 'Work Sans';
font-size: 22px;
color: white;
display: block;
width: 100%;
margin-bottom: 20px;
}
.innerFooter span {
font-family: 'Work Sans';
font-size: 12px;
color: white;
}
</style>
<script
async
custom-element="amp-carousel"
src="https://cdn.ampproject.org/v0/amp-carousel-0.2.js"
></script>
<script
async
custom-element="amp-video"
src="https://cdn.ampproject.org/v0/amp-video-0.1.js"
></script>
</head>
<body>
<div class="header">
<amp-img
src="https://i.imgur.com/vPr7fdQ.png"
width="175px"
height="50px"
></amp-img>
<input type="checkbox" id="nav-toggle" class="nav-toggle" />
<nav>
<ul>
<li>
<a
href="file:///C:/Users/pilot/Documents/GitHub/AMP/Home/Home-Page.html"
>Home</a
>
</li>
<li><a href="file:///C:/Users/pilot/Documents/GitHub/AMP/Products/products_page.html">Products</a></li>
<li>
<a
href="file:///C:/Users/pilot/Documents/GitHub/AMP/Contact/Contact.html"
>Contact</a
>
</li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
</div>
<amp-carousel
layout="fixed-height"
type="slides"
height="900"
width="auto"
controls
loop
autoplay
delay="3000"
data-next-button-aria-label="Go to next slide"
data-previous-button-aria-label="Go to previous slide"
>
<amp-img
src="https://i.imgur.com/6H2AFQm.png"
width="1280"
height="720"
></amp-img>
<amp-img
src="https://i.imgur.com/6jOfwYY.png"
width="1280"
height="720"
></amp-img>
<amp-img
src="https://i.imgur.com/AFq0mSz.png"
width="1280"
height="720"
></amp-img>
<amp-img
src="https://i.imgur.com/7tMi95w.png"
width="1280"
height="720"
></amp-img>
<amp-img
src="https://i.imgur.com/G020qk3.png"
width="1280"
height="720"
></amp-img>
<amp-video
layout="fixed"
autoplay
loop
width="1280"
height="720"
poster="https://i.imgur.com/lNFDJb1.png"
>
<source src="https://i.imgur.com/3TFahoU.mp4" type="video/mp4" />
<div fallback>
<p>This browser does not support this video element.</p>
</div>
</amp-video>
</amp-carousel>
<div class="content">
<h1 class="Centered">
Providing solutions for all your surface treatments
</h1>
<div class="clearfix">
<div>
<p class="left">
Reliant Industrial Supply provides solutions for all your surface
treatments.Our supplier sia Coated Abrasives, the oldest abrasive
manufacturer in the world, brings one of the best abrasives on the
market. We supply Flex Trim brushes for all liner and carousel
sanding needs. We provide AirVantage Sanders and Coilhose
Pneumatics, for when you want the best quality handsanding tools and
results. When it comes to machines, we have one of the best and also
one of the most experienced machinery manufacturers, Timesavers Wide
Belt Sanders. For cutting and shaping we have a wide variety of
Exchangeable Saw Blades and Router Bits. Whether cutting, shaping or
sanding, you can rely on Reliant. We provide solutions for surface
preparation through complete sanding systems which include coated
abrasives, pneumatic sanders and machinery.
</p>
</div>
<div>
<img class="right" src="https://i.imgur.com/u8hDnzX.jpg" layout="responsive" width="800px;" height="300px;"/>
</div>
</div>
<div class="footer">
<div class="innerFooter">
<div class="logoContainer">
<amp-img src="https://i.imgur.com/jlRKmij.jpg" height="109" width="200">
</div>
<div class="footerThird">
<h1>Address: 18061 Kirk Ave, Tustin, CA 92780</h1>
<h1>Phone Number: (714) 287-6815 </h1>
</div>
<div class="footerThird">
<span>Copyright 2020 Reliant Industrial Supply<span>
</div>
</div>
</div>
</body>
</html>
Hey All!
If you run this code, it looks good and usable on desktop. But as soon as you decrease the viewport width to simulate mobile, the paragraph looks janky. All I want to do is put the text under the image for mobile only. I understand that your just supposed to put the different css above the media query, but I do not know how to proceed to do that as I don't know how to make it ignore the css that allows the image and the text to be inline on the desktop on the mobile side. Thank you for helping me out!
2 answers
solution1
1 2020-07-18 16:18:13
To hide the paragraph in mobile viewport, you can add the following code block in the css-
@media only screen and (max-width: 768px) {.left { display: none; } }
It basically tells the browser that if the screen width is between 0px - 768px(which is the typical width of a mobile screen), then you should not render the < p > tag. In other words, all devices with a screen width of 768px or less, just ignore the < p > tag in html like it doesn't even exist!
Hope it helps. comment if it doesn't work or you need any clarifications.
solution2
1 ACCPTED 2020-07-19 04:28:31
This is my solution:
@media only screen and (max-width: 768px) {
.clearfix {
flex-flow: column;
}
.clearfix > div {
order: 1;
}
.clearfix > div:first-child {
order: 2;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How do I make the banner image go down in mobile site
How can I make the text on the right go under the slider
Make image go below text on mobile, not above
How do I place text under an image?
How do I make div go under transparent sticky header?
How do I make a HTML div go under another div?
How do I make this image reponsive for mobile?
How to make an image go under a <div> in HTML?
How do I make the text appear under the center of the recipe image and be an equal distance from each other with css?
How do I make an image spin under another image?
Related Tags