So, I have written a page in AMP HTML, and I have a DIV I want to hide when someone views the page on mobile, but I want it shown when it's on a resolution such as Desktop or Tablet. I have Bootstrap enabled and all of the CSS is styled in the of the document, per AMP Standards.
<section class="about" id="about" alt="about">
<div class="col-md-6">
<p>Example Content</p>
</div>
<div class="col-md-6">
<amp-img src="example.jpg" alt="Example" height="400" width="800"></amp-img>
</div>
</section>
I want the second DIV in the Section to be hidden on Mobile.
Bootstrap has classes for this sort of thing. Use them individually or in combination to achieve the desired result.
hidden-xs
http://getbootstrap.com/css/#responsive-utilities-classes
With CSS3 media queries you can make CSS act different in different resolutions.
Example:
#media screen and (min-width: 480px) {
#yourdiv {
visibility: hidden;
}
}
Here is complete tutorial:
http://www.w3schools.com/css/css3_mediaqueries.asp
Just add .hidden-xs class to the element you want to hide from mobile device.
<section class="about" id="about" alt="about">
<div class="col-md-6">
<p>Example Content</p>
</div>
<div class="col-md-6 .hidden-xs">
<amp-img src="example.jpg" alt="Example" height="400" width="800"></amp-img>
</div>
</section>
Related
When I alter the screen size to a phone view, <div>'s seem to stack in a different order. Is there a way to enforce divs to stack a particular order with media queries, I've tried to search everywhere and cannot find a simple way to do this. I am using Foldy Grids just to use for the responsiveness of them.
Order of divs on a full screen is:
1.)Image on left, text on right
2.)Text on left, image on right
When it goes to a mobile view, I would like it to be stacked from top to bottom in order of:
1.)Image
1.)Text
2.)Image
2.)Text
At present, they order as:
1.)Image
1.)Text
2.)Text
2.)Image
html:
<!-- First section -->
<div class="row">
<div class="grid-2">
<img src="images/EnrolYourself2Small.png">
</div>
<div class="grid-4">
<h1 class="left-align fontAmaticH1">Text............</h1>
<p class="left-align fontPlayfair">More text...........</p>
</div>
</div>
<br>
<!-- Second section -->
<div class="row">
<div class="grid-4">
<h1 class="left-align fontAmaticH1">2nd text.........</h1>
<p class="left-align fontPlayfair">more of 2nd div text........</p>
</div>
<div class="grid-2">
<img src="images/MonitorProgressSmall.png">
</div>
</div>
you should have a look at CSS media queries.
this link might provide you a basis for what you want
For ordering your content, you can choose CSS grid:
Link for the exmaples
And use grid-template on each query depending on the device you are displaying your content
Example:
.main{
display:grid;
grid-template:
'imagespace1'
'textspace1'
'imagespace2'
'textspace2'
}
.image1{
grid-area: imagespace1
}
.image2{
grid-area:imagespace2
}
.text1{
grid-area:textspace1
}
.text2{
grid-area:textspace2
}
#media only screen and (max-width: 500px) {
/* For mobile phones: */
[class*="main"] {
grid-template:
'imagespace1'
'imagespace2'
'textspace1'
'textspace2'
}
}
<div class='main'>
<div class='image1'>image1</div>
<div class='image2'>image2</div>
<div class='text1'>text1</div>
<div class='text2'>text2</div>
</div>
I'm trying to display each image and its description on each half of the current browser screen. Here is my HTML:
<div class="container">
<div class="row">
<div class="col-6">
<img src="images/img1.jpg" alt="" />
</div>
<div class="col-6">
<p>Here is the description</p>
</div>
</div>
</div>
When I resize and reach the mobile phone viewport, the image and text are still displaying on each half of the screen. How can I make them display on top of each other, i.e: the text should be displayed right below the image on the next line?
col-6 split the screen for every viewport. You should use col-sm, col-md, col-lg or col-xl, depending on which screen size you wish to add the grid breakpoint.
You can check more informations here: https://getbootstrap.com/docs/4.1/layout/grid/
You're using bootstrap, so just use the baked in responsive utility classes;
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<img src="images/img1.jpg" alt="" />
</div>
<div class="col-12 col-md-6">
<p>Here is the description</p>
</div>
</div>
</div>
Use these breakpoints for mobile devices
#media(max-width:600px) //for mobile devices
#media(min-width:600px) //for laptop screens
Then use grid property
refer: Grid property
This question already has answers here:
Responsive web design is working on desktop but not on mobile device
(4 answers)
Closed 5 years ago.
Good day,
I have a little gallery section on a web page where I make use of a css grid. it works perfectly fine on a normal web browser and when i scale it down i have managed to have it adjust as i wish using Media Queries (one image after the other), To my disappointment this didn't work when viewing on a mobile devise.
This is my first web site i have created so i expected issues. but I am now stuck on this one.
I need the images to arrange themselves below each other on a mobile browser. How would I go about this? see below html & css, the webpage is redneckrebellion.co.za if you want to see what I'm talking about or see https://codepen.io/underlight/pen/eyYLBa.
<content class="main-body">
<div class="main-content">
<div class="portfolio">
<div class="portfolio-item medium-one">
<div class="description">
<h1 class="text">Coffee Table</h1>
<p class="text">Custom Union Jack Coffee Table</p>
</div>
</div>
<div class="portfolio-item medium-two">
<div class="description">
<h1 class="text">Laser Cut Logo</h1>
<p class="text">Redneck Rebellion Laser Cut Logo</p>
</div>
</div>
<div class="portfolio-item wide-one">
<div class="description">
<h1 class="text">Custom Desk</h1>
<p class="text">Custom Desk Built To Clients Design</p>
</div>
</div>
<div class="portfolio-item tall">
<div class="description">
<h1 class="text">Container Cupboard</h1>
<p class="text">Custom Cupboard Built For Lillimex</p>
</div>
</div>
<div class="portfolio-item wide-two">
<div class="description">
<h1 class="text">Custom Shelf</h1>
<p class="text">Custom Shelf Built For Kids Car Themed Bedroom</p>
</div>
</div>
</div>
</div>
thanks!
There are many ways of doing this, and, based on your question, I'm assuming that these divs are being displayed horizontally already? Which means that they are using the display property of inline or inline-block, or, using float already. If you want to have something that will be re-usable (like Bootstrap framework), you can do something like this:
#media screen and (max-width: 480px) {
.medium-one, .medium-two .wide-one .tall .wide-two {
display:block;
}
}
Also, I would highly recommend using a library that is already made for something like this, such as Bootstrap
The simplest way is to surround your .portfolio-item with a media query like this:
#media(min-width: 500px) {
.portfolio-item {
margin: 10px;
box-shadow: 1;
display: flex;
justify-content: center;
align-items: center;
border: 5px solid white;
border-radius: 3%;
}
}
The grid is a 12-column fluid grid with a max width of 960px, that shrinks with the browser/device at smaller sizes. The max width can be changed with one line of CSS and all columns will resize accordingly. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser.
<!-- .container is main centered wrapper -->
<div class="container">
<!-- columns should be the immediate child of a .row -->
<div class="row">
<div class="one column">One</div>
<div class="eleven columns">Eleven</div>
</div>
<!-- just use a number and class 'column' or 'columns' -->
<div class="row">
<div class="two columns">Two</div>
<div class="ten columns">Ten</div>
</div>
enter code here
<!-- there are a few shorthand columns widths as well -->
<div class="row">
<div class="one-third column">1/3</div>
<div class="two-thirds column">2/3</div>
</div>
<div class="row">
<div class="one-half column">1/2</div>
<div class="one-half column">1/2</div>
</div>
</div>
<!-- Note: columns can be nested, but it's not recommended since Skeleton's grid has %-based gutters, meaning a nested grid results in variable with gutters (which can end up being *really* small on certain browser/device sizes) -->
I'm using bootstrap 3 in one of my application. If I use width="80%" height="420" then my video comes with perfect size in large screens. But it is not working as responsive in small screens (mobiles) because of height="420". So that I used class="embed-responsive-item" with iframe. Again same problem iframe is not working as responsive. Any suggestions please. I'm not familiar with css. Here is some stuff.
<div class="wrapper">
<aside class="right-side">
<section class="content">
<div class="row">
<div class="col-xs-9">
<div style="background-color: #ffffff;text-align:center;padding:1%;" id="tmp">
<iframe id="crntplay" width="80%" height="420" src="http://www.youtube.com/embed/id?autoplay=0" allowfullscreen></iframe>
<div class="row">
<div class="col-md-8"><span id="crntplaytitle" style="margin-left:15%;text-align:left;display: block;font-size:14pt;font-weight:bold;">title</span></div>
<div class="col-md-2"><span id="crntplayviews" style="text-align:right;display: block;font-size:14pt;font-weight:bold;">views</span></div>
</div>
</div>
</div>
</div>
</section><!-- /.content -->
iframe can't be responsive. Just the contents in them.
You could use jquery to resize the iframe based on screen resolution
Adjust width and height for iframe depending on screen size
I am trying to design a responsive website. For mobile view, I want to hide the right banner div from sample code below so I just write'display: none;' but the container div came up and overlay with the row div. I just want to hide the right banner without any affect alignment of other divs. Could you please help me if I can sets height for row div or any other issues?
<div class="row clearfix">
<div class="left-banner">
<img src="" alt="">
</div>
<div class="right-banner">
<img src="" alt="">
</div>
</div>
<div class="container">
<p></p>
</div>
.row{width:100%;}
.left-banner{float:left; width:60%;}
.right-banner{float:right; width:40%; display:none;}
.container{width:100%;}
You should use visibility: hidden instead of display: none so that other elements' position is not affected.
Use CSS media query.
#media (max-width: <desired width of viewport>) {
.right-banner{
display:none;
}
}
Media query is use to adjust your design according to desired viewport.
have a read- https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
EDIT
You can try to use visibility:hidden on your right-banner instead of display:none, this way even if its hidden the space will still remain as if the right-banner is still there.
You have only to declare in the div-container float: left, than your code will work :)
jsfiddle
<div class="row clearfix">
<div class="right-banner">
<img src="http://im1.book.com.tw/image/getImage?i=http://www.books.com.tw/img/001/061/38/0010613865.jpg&w=348&h=348" alt="" />
</div>
<div class="left-banner">
<img src="http://im1.book.com.tw/image/getImage?i=http://www.books.com.tw/img/001/061/38/0010613865.jpg&w=348&h=348" alt="" />
</div>
</div>
<div class="container">
<p>Test</p>
</div>
Here is the css part:
.row{width:100%;}
.left-banner{width:50%;float:left;}
.right-banner{width:50%;float:right;display:none;}
.container{width:100%;float:left;}
Why don't you try media queries ?
#media all and (max-width: 658px) { // for mobile
.right-banner{
float:right; width:40%; display:none;
}
}