My div class info-container doesn't seem to be positioned proper on mobile. Code seems ok, so not sure what the problem is. I want the class info-container underneath the logo in mobile only. However the code isn't seem to be making effect.
I am fairly new to html/css
.topSection {
display: flex;
justify-content: space-between;
}
.info-container {
display: flex;
flex-direction: column;
}
.info {
display: flex;
align-items: center;
}
.info img {
margin-right: 8px;
}
#media only screen and (max-width: 600px) {
.info-container {
position: relative;
top:12px;
left:5px;
}
}
<div class="topSection">
<div class="logo">
<a href="http://www.elegantcurtainsandblinds.co.uk/index.php"><img
src="http://www.elegantcurtainsandblinds.co.uk/images/eg_logo_new.png"
alt="Logo"></a>
</div>
<div class="info-container">
<div class="info">
<img src="http://elegantcurtainsandblinds.co.uk/images/mobile.png" height="30px" width="30px;" />
<a style="text-decoration:none;color:#2B8C1A;" href="tel:01924724848">Call Us: 01924 724848</a>
</div><br>
<div class="info">
<img src="http://elegantcurtainsandblinds.co.uk/images/images.png" height="30px" width="30px;">
<p style="color:#2B8C1A">Visit Our Showroom</p>
</div><br>
<div class="info">
<img src="http://elegantcurtainsandblinds.co.uk/images/video.png" height="30px" width="30px; target="_blank"">
<p style="color:#2B8C1A">Watch Our Video</p>
</div>
</div>
</div>
Add in media query this css
#media only screen and (max-width: 600px){
.topSection {
display: unset;
}
}
Add display:block; to parent class on mobile
http://prntscr.com/kdq5tq
It was not showing properly because of flex property, try adding below css.
#media only screen and (max-width: 600px) {
.topSection {
display:block;
}
}
#media only screen and (max-width: 600px) {
.info-container {
position: relative;
top:12px;
left:5px;
}
.topSection {
display: flex;
justify-content: space-between;
flex-direction: column;
}
}
Please check this code it working .
add below css code for mobile layout
#media only screen and (max-width: 600px){
.topSection {
display: block;
justify-content: space-between;
clear: both;
overflow: hidden;
}
.info-container {
position: relative;
top: -28px;
left: 0;
display: inline-block;
width: 100%;
float: left;
clear: both;
}
.info {
float: left;
width: 33%;
}
}
Related
I am new to responsive styling and couldnt find a solution to my problem elsewhere:
I have two horizontally aligned tiles on Desktop viewport. One is a div that contains text, the other is an image.
My code for this:
.tile-image{
width: 70%;
}
.tile-text{
width: 30%;
background-color: #d9b886;
color: white !important;
font-size: 2vh;
display: table;
word-wrap: break-word;
white-space: normal;
}
.tile-text-inner{
display: table-cell;
vertical-align: middle;
padding: 20px;
}
.container{
display: flex;
flex-direction: row;
}
<div class="container">
<div class="tile-text">
<div class="tile-text-inner">
TEXT
</div>
</div>
<div class="tile-image">
<img src="https://test-shop.tt-gmbh.de/media/a9/b8/4c/1638172501/13811-AdobeStock_294559939_New-Africa.jpg">
</div>
</div>
On mobile viewport I want to display both tiles vertically with the image on top and the text tile below. Like in the image below:
How can I achieve this?
You can use media queries
#media screen and (max-width: 600px) {
.container {
flex-direction: column-reverse;
}
.tile-text{width: 100vw}
}
.tile-image{
width: 70%;
}
.tile-text{
width: 30%;
background-color: #d9b886;
color: white !important;
font-size: 2vh;
display: table;
word-wrap: break-word;
white-space: normal;
}
.tile-text-inner{
display: table-cell;
vertical-align: middle;
padding: 20px;
}
.container{
display: flex;
flex-direction: row;
}
#media screen and (max-width: 600px) {
.container {
flex-direction: column-reverse;
}
.tile-text{width: 100vw}
}
<div class="container">
<div class="tile-text">
<div class="tile-text-inner">
TEXT
</div>
</div>
<div class="tile-image">
<img src="https://test-shop.tt-gmbh.de/media/a9/b8/4c/1638172501/13811-AdobeStock_294559939_New-Africa.jpg">
</div>
</div>
In comments they were saying truth you have to use flex-direction: column but it won't work because what you had written css isn't responsive friendly code so I re-created new one, use media-queries for responsive, and please avoid using a lot div wrapping it makes lots of complexity
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
position: relative;
width: 100%;
height: 100vh;
}
.container img {
width: 100%;
height: 100%;
position: absolute;
}
.container .tile-text{
display: flex;
justify-content: center;
align-items: center;
width: 30%;
z-index: 9;
height: 100%;
background: #d9b886;
}
.container .tile-text .tile-text-inner{
color: #FFF;
}
#media screen and (max-width: 761px){
.container{
flex-direction: column-reverse;
}
.container .tile-text{
width: 100%;
height: 30%;
}
}
<div class="container">
<div class="tile-text">
<div class="tile-text-inner">
Marry Christmas
</div>
</div>
<img src="https://test-shop.tt-gmbh.de/media/a9/b8/4c/1638172501/13811-AdobeStock_294559939_New-Africa.jpg">
</div>
I'm trying to master the grid layout in CSS3. I want to write some HTML/CSS that enable the my 3x1 grid to stack when viewed on mobile. For now, the squares just keep shrinking until they're small. I've been able to work with mobile CSS before, but working with grids are new to me. Can anyone offer some pointers or suggestions?
Here's my code:
HTML:
<div class="container">
<div class="grid">
<div class="cell">
<img src="https://www.easycalculation.com/area/images/big-square.gif">
</div>
<div class="cell">
<img src="https://www.easycalculation.com/area/images/big-square.gif">
</div>
<div class="cell">
<img src="https://www.easycalculation.com/area/images/big-square.gif">
</div>
</div>
CSS:
.container {
width: 100%;
margin: 0 auto;
}
.grid {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.cell {
flex: 0 0 32%;
margin-bottom: 5px;
}
img {
max-width: 100%;
height: auto;
}
body {
background-color: #dedede;
}
Here's a CodePen link as well: https://codepen.io/anfperez/pen/QrEBLZ
Try this CSS:
(codepen https://codepen.io/bonniemellott/pen/ELypzm)
.container {
width: 100%;
margin: 0 auto;
}
.grid {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.cell {
//removed flex attribute
margin-bottom: 5px;
}
img {
max-width: 100%;
height: auto;
}
body {
background-color: #dedede;
}
Add this to your css
You will have to use media query for stacking the boxes.
The way u can do this is by setting the flex-direction:column on smaller devices
#media (max-width: 768px) { /*You can decrese this number if you want only on small devices*/
.grid {
flex-direction: column;
}
}
Here is the updated codepen link
the issue I am having is that when I change my browser size to tablet and mobile my quotes and testimonials named Jerry and Michelle go outside of the color background which makes me think that they aren't nested correctly. However, I looked at it and I believe it should work but somehow it isn't. The easiest way to see this since I just isolated this code and my whole site isn't pushing it out of the background colored box, is if you make the code snippet full-sized and put the browser to the smallest width. You will see the quotes outside of the colored box. If anyone could spot the issue and let me know it would be greatly appreciated! Thank you!
#colorbk{
background-color: #1DA0A3;
}
.container {
display: flex;
background-color: #1DA0A3;
flex-flow: row wrap;
max-width:1700px;
margin: 0 auto;
}
#qwrapper {
display: flex;
height: 100%;
width: 100%;
align-items:center;
justify-content:center;
margin:10px;
background-color:#1DA0A3;
}
.row {
flex: 0 auto;
height: 100px;
margin:0;
}
#lighticon{
padding-bottom:30px;
}
#jerry{
width:400px;
}
#michelle{
width:400px;
}
.italic{
font-style:italic;
}
.right{
float:right;
}
#media (max-width: 800px) {
#qwrapper {
flex-direction: column;
align-items: center;
}
}
#media screen and (max-width:480px) {
#qwrapper {
flex-wrap: wrap;
}
.row {
}
}
#media only screen and (min-width: 760px) {
#qwrapper{
justify-content: space-around;
margin:10px;
}
}
<div id="colorbk">
<div class="container">
<div id="qwrapper">
<h3 id="michelle" class="row" ><div class="italic">"She always thinks of her clients."</div>
<br>
<div class="right" id="connect">-Michelle Houle Conn. FSE</div>
</h3>
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" class="row" alt="" id="lighticon"/>
<h3 id="jerry" class="row"><div class="italic">"Very smart, creative person, problem solver."</div>
<br>
<div class="right">-Jerry Nygard C2P</div>
</h3>
</div>
</div>
</div>
You can simply solve the issue by removing width:400px from inner texts:
#jerry{
/*width:400px;*/
}
#michelle{
/*width:400px;*/
}
as in following snippet:
#colorbk{
background-color: #1DA0A3;
}
.container {
display: flex;
background-color: #1DA0A3;
flex-flow: row wrap;
max-width:1700px;
margin: 0 auto;
}
#qwrapper {
display: flex;
height: 100%;
width: 100%;
align-items:center;
justify-content:center;
margin:10px;
background-color:#1DA0A3;
}
.row {
flex: 0 auto;
height: 100px;
margin:0;
}
#lighticon{
padding-bottom:30px;
}
#jerry{
/*width:400px;*/
}
#michelle{
/*width:400px;*/
}
.italic{
font-style:italic;
}
.right{
float:right;
}
#media (max-width: 800px) {
#qwrapper {
flex-direction: column;
align-items: center;
}
}
#media screen and (max-width:480px) {
#qwrapper {
flex-wrap: wrap;
}
.row {
}
}
#media only screen and (min-width: 760px) {
#qwrapper{
justify-content: space-around;
margin:10px;
}
}
<div id="colorbk">
<div class="container">
<div id="qwrapper">
<h3 id="michelle" class="row" ><div class="italic">"She always thinks of her clients."</div>
<br>
<div class="right" id="connect">-Michelle Houle Conn. FSE</div>
</h3>
<img src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png" class="row" alt="" id="lighticon"/>
<h3 id="jerry" class="row"><div class="italic">"Very smart, creative person, problem solver."</div>
<br>
<div class="right">-Jerry Nygard C2P</div>
</h3>
</div>
</div>
</div>
Edit:
for your jsFiddle, i modify it as following:
jsfiddle.net/81d8trag/2
remove height:100px from .row class. also as the last icon has set its size with that row class, i add width:100px to it in #lighticon css:
.row {
flex: 0 auto;
/*height: 100px;*/
margin:0;
}
#lighticon{
width:100px;
padding-bottom:30px;
}
that's because you are fixing the width of
#jerry {
width: 400px;
}
#michelle {
width: 400px;
}
to 400px, so no matter how large or small your screen size is, it is fixed to 400px. if you want to make it responsive you have to use %.
When my website is full size, I have content in the footer aligned to the left and right, as follows;
<div class="site-info">
<span class="left">© Client 2016</span>
<span class="right">Site by<img class="credits-img" src="http://voicecoaches.com/wp-content/uploads/2010/08/john_text.png" width="50px" align="right"></span>
</div>
Using this CSS;
.right {
float: none;
}
.left {
float: none;
}
When the website is displayed on a phone, I want the content in the span classes to be displayed in the middle of the screen, with the '© Client 2016' text being displayed on one line, and the text/image link being displayed on another line below it, both centered. Any help is appreciated, thanks
Here is one way, using flexbox
.site-info {
background: lightgray;
overflow: auto;
}
.right img {
float: right;
}
#media screen and (max-width: 480px) {
.site-info {
display: flex;
flex-direction: column;
align-items: center;
background: lightgray;
}
.right {
display: flex;
align-items: center;
}
.right img {
margin-left: 10px;
}
}
<div class="site-info">
<span class="left">© Client 2016</span>
<span class="right">Site by <img class="credits-img" src="http://voicecoaches.com/wp-content/uploads/2010/08/john_text.png" width="50px"></span>
</div>
And if you can't/don't want flexbox, here is one without
.site-info {
background: lightgray;
overflow: auto;
}
.right a {
float: right;
}
#media screen and (max-width: 480px) {
.site-info > span {
display: block;
text-align: center;
}
.right * {
vertical-align: middle;
}
.right a {
float: none;
margin-left: 10px;
}
}
<div class="site-info">
<span class="left">© Client 2016</span>
<span class="right">Site by <img class="credits-img" src="http://voicecoaches.com/wp-content/uploads/2010/08/john_text.png" width="50px"></span>
</div>
/*Screens up to 480px wide*/
#media screen and (max-width: 480px) {
.left, .right {
text-align: center;
}
}
Add this to your css and if the screen size is less then 480px it will do this code instead.
You can read more about the #media rule here: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I am working on a site and I have two images that need to be inline when device width is more than 425px (min-width: 425px) but for some reason it does not seem to be working how it should be and my css with the #media but it doesn't work for some reason although it is fairly basic
CODE
.info-img {
width: 49.75%;
}
.info-images {
display: inline-block;
text-align: center;
}
#media screen and only (max-width: 425px) {
.info-img {
width: 100%;
padding-bottom: 1px;
}
.info-images {
display: block;
text-align: center;
}
}
<div class="info-images">
<img src="https://dl.dropboxusercontent.com/s/dd5exdwwpa13yxnthg/unspecified-4.jpeg?dl=0" class="info-img">
<img src="https://dl.dropboxusercontent.com/s/fo3bt6ruhx4qppztho/unspecified-6.jpeg?dl=0" class="info-img">
</div>
</div>
<style type="text/css">
#import url('https://dl.dropboxusercontent.com/s/ikcsorhvohzdipo/information.css?dl=0');
</style>
The problem is because you are giving inline-block to parent instead of img, plus you are writing your media wrongly (its not #media screen and only, but #media only screen and).
Snippet
.info-images {
font-size: 0;
/* fix inline-block gap */
}
.info-img {
width: 50%;
display: inline-block;
vertical-align:top; /* may be necessary */
box-sizing: border-box;
padding: 0 1%
}
#media only screen and (max-width: 425px) {
.info-img {
width: 100%;
padding-bottom: 1px;
}
.info-images {
display: block;
text-align: center;
}
}
<div class="info-images">
<img src="//lorempixel.com/1600/900" class="info-img">
<img src="//lorempixel.com/1600/900" class="info-img">
</div>