I've a got a page in mobile where I've tried to turn everything black.
I did this as follows:
#media (max-width: 768px)
{body, html.page-id-
28{background-color:
black! important;}}
#media (max-width: 768px)
{. parallax-window
{background-color: black!
important;}}
Id like to reduce the page height anyway, so tried:
#media (max-width: 768px) {.page-id-28{height: 600px
!important}}
Didn't work.
So now half the page is black, half is white, and I can't adjust the height even with importanthere. It seems to flash black when the page loads, but then turns white.
What's causing this?
<div class="parallax-window fullscreen" data-parallax="scroll" data-image-src="http://4309.co.uk/wp-content/uploads/2019/08/download-2.png" data-ios-fix="true" data-over-scroll-fix="true" data-android-fix="true">
<div class="align-transform">
<div class="row">
<div class="top-parallax-section">
<div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1 text-center">
You need remove height: 600px !important in this css, also you have many fixed height in css, need remove it in #media for mobile.
#media (max-width: 768px)
.parallax-window {
background-color: black !important;
/* height: 600px !important; */
top: -400px;
}
Related
I am currently creating a website that has media queries. I already have a normal navigation however when the webpage size reduces to a mobile size, I would like for the navigation to switch to another navigation bar which I have created, which includes icons which makes it easier for mobile users
#media only screen and (min-width : 50px) {
<div class = "navbar">
<img src="Images/houseicon.png"/>
<img src="Images/educationicon.png"/>
<img s**strong text**rc="Images/contactmeicon.png"/>
</div>}
You don't need to add html to media query...
Html is part of html page
You just need to set below css with media query in your css file or in your tag.
#media only screen and (max-width : 767px) { .navbar a img{ width:50px !important; height:50px !important;}}
Use below code to show navigation properly on responsiveness mobile view.
Code::
`#media only screen and (min-width: 320px) and (max-width: 480px) {
.nav img {
height: 100px;
width: 100px;
}
} `
Note:: height: 100px; and width: 100px;
100px, is just for reference, please update height and width with your actual image size.
Apologies for the poor title, my terminology is weak but I am working on it.
I have a div partially covering a background image when the screen width is at a larger size. For smaller screen widths, I would like that div to drop below the background image rather than continue to overlay the background image—as what currently I have here in this pen:
https://codepen.io/Ywehc/pen/KQqQeN
<div class="container-fluid" style="width:cover">
<img src="https://images.unsplash.com/photo-1490641525855-f5ffa411459d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=85bad8135a13687bbd2ac661023e8dc4&auto=format&fit=crop&w=1189&q=80" style="width:100%">
<div class="overlaid-div" style="background-color: blue; height: 15em; width: 20em; margin-left:50%; margin-top: -100px; position: relative">
</div>
<div class="randomelement" style="width: 30em; height:10em; background-color: black">
</div>
</div>
So basically I would like to keep overlay for large screen widths, but as screen width went smaller, the divs should stack vertically and the blue div should not overlay anymore.
Thank you kindly!
You only need a single media query to achieve this (adjust break-point width as necessary).
#media only screen and (max-width: 700px) {
.overlaid-div {
/* !important is needed to override your inline margin style */
margin-top: 0 !important;
}
}
https://codepen.io/antibland/pen/XZgEzo
add this to css.
You should use #media to change the margin based on desired screen size
#media only screen and (min-width:400px){ // Change 400px to your desired the maximum of smallest width screen
.overlaid-div {
margin-top: 0%
}
}
#media only screen and (min-width:1000px){
.overlaid-div {
margin-top: -10%
}
}
and, delete margin-top from inner style
I got media queries working perfect on second html page with this code
#media only screen and (min-device-width: 200px) and (max-device-width: 1099px) {
.snebild img {
width: 50%;
max-width: 50%;
right: 2%;
}
.title {
margin-left: 4%;
position: absolute;
top: 10%;
}
}
But on my second page im trying to change the font size so it looks good on lower resolutions but using same code just changing to correct class and p element but nothing works.
#media only screen and (min-device-width: 200px) and (max-device-width: 1099px) {
.introus p {
font-size: 8px;
}
}
This is the HTML
<div class="introus">
<h2>Main Title</h2>
<h4>Second title</h4>
<p>Text to change size on when using lower resolution such as Iphones</p>
</div>
I assume you are testing it on a desktop device and not on a mobile device.
Try to change min-device-width to min-width that should work.
Correct me if I'm wrong.
You should use min-width instead of min-device-width because the main difference between width and device-width is that device-widths don’t always match the layout viewport of said device.
Changing that parameters the code works fine
#media only screen and (min-width: 200px) and (max-width: 1099px) {
.introus p {font-size: 8px;}
}
<div class="introus">
<h2>Main Title</h2>
<h4>Second title</h4>
<p>Text to change size on when using lower resolution such as Iphones.</p>
</div>
I have a div element that must have a background image that is fixed so when you scroll the content rolls over it. My issue is that I have to set a height for that specific div element in order to see it. That is because there isn't any content in that div.
CSS
#top-banner{
background-image: url(../img/grey.jpg);
background-attachment:fixed;
height:700px;
background-repeat: no-repeat;
background-size: 100% auto;
}
HTML
<div class="container-fluid">
<div class="row" >
<div class="col-sm-12" id="top-banner"></div>
</div>
<div class="row">
<div class="col-sm-12 text-center" >
<h1 class="band-name">Lorem Ipsum</h1>
</div>
</div>
</div>
This gives me what I want for larger screens:
But as you shrink the browser, like you are on a phone or tablet, the height for that div pushes all the content down making it look unappealing:
Is there a way to not give it a specific height so the content is not pushed down on smaller screen but still have the fixed background image?
EDIT
Here is a fiddle to check out. http://jsfiddle.net/0xbfhwnt/
I reiterate: It looks fine at first but when you make the browser smaller the image shrinks like it is supposed to but the height of the div stays keeping the content below the image instead of flush with the background image div.
Have you considered something along the lines of media queries?
Here's a first iteration:
http://jsfiddle.net/0xbfhwnt/2/
#media (min-width: 400px) and (max-width: 700px) {
#top-banner{
height: 200px; }
}
#media (min-width: 200px) and (max-width: 399px) {
#top-banner{
height: 100px; }
}
UPDATE
So, using media queries, you can track the size of the main div all the way down to the smallest screen size.
In this example, all the whitespace is gone.
http://jsfiddle.net/0xbfhwnt/7/
#media (min-width: 500px) and (max-width: 800px) {
#top-banner {
height: 200px;}
}
#media (min-width: 375px) and (max-width: 499px) {
#top-banner {
height: 150px;}
}
#media (min-width: 250px) and (max-width: 374px) {
#top-banner {
height: 100px;}
}
#media (min-width: 50px) and (max-width: 249px) {
#top-banner {
height: 50px;}
}
Of course, the smaller the range between min-width and max-width, the smoother the transition would be.
I am using bootstrap's grid system and here's my website. The issue is that on initial load the item card looks pretty crappy like this:
and here's what it looks like after it loads:
As you can see the issue is because I am not supplying the image's width and height and hence before it load I am seeing this weird layout which is not good. The issue why I am not supplying a width and height is because this is responsive, such that when I resize the width of the browser then the width of the card also changes, and hence supplying a constant width and height doesn't work. What's the best solution out of this?
You can calculate your image ratio if it's known then set its padding to the ratio
Check out the js fiddle:
http://jsfiddle.net/J8AYY/7/
<div class="img-container">
<img src="">
</div>
.img-container {
position:relative;
padding-top:66.59%;
}
img {
position: absolute;
top: 0;
left: 0;
width:100%;
}
So if your image has width 2197 pixels and height 1463 pixels
then set the container that contain the image to have padding-top 1463/2197*100%
then set your image to position absolute
now your image can be responsive and worry free of collapsing container
You need to put your thumbnails in a dynamically sized container, whose height is proportional to it's width. You can do this by matching width and padding-bottom on the container, as well as a few other specifics as in the Bootply and example below:
Bootply
Example:
CSS:
.thumbnail_container {
position: relative;
width: 100%;
padding-bottom: 100%; <!-- matching this to above makes it square -->
float:left;
}
.thumbnail {
position:absolute;
width:100%;
height:100%;
}
.thumbnail img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
img{
max-height:100%;
max-width:100%;
}
HTML:
<div class="container-fluid"> <!-- this makes your images scale constantly, between breakpoints as welll. removing -fluid makes then jump in size at breakpoints -->
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail_container">
<div class="thumbnail">
<img src="http://placehold.it/400x600">
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail_container">
<div class="thumbnail">
<img src="http://placehold.it/600x600">
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail_container">
<div class="thumbnail">
<img src="http://placehold.it/600x400">
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail_container">
<div class="thumbnail">
<img src="no-photo" /> <!-- No Photo, but it still scales -->
</div>
</div>
</div>
You'll notice that in the last thumbnail, even though there is no file loaded, the container is square. This is the key that will fix your specific issue.
Note: matching padding-bottom to width will give you a square thumbnail container, but you can make it any proportion you want, by adjusting the padding-bottom %.
Note2: because you haven't shared your code, you'll probably have to do a bunch of class renaming and testing to get this to work. I had to guess at your setup based on what I saw on your site. Hope it helps!
If you're working with images that are all the same size, you can set a min-height on the image element for each step of the responsive page. You would have to find out how tall the images are at each step of the responsive page design, but it could look something like this:
.item-card img {
min-height: 100px;
}
// Small screen
#media (min-width: 768px) {
.item-card img {
min-height: 150px;
}
}
// Medium screen
#media (min-width: 992px) {
.item-card img {
min-height: 200px;
}
}
// Large screen
#media (min-width: 1200px) {
.item-card img {
min-height: 250px;
}
}
As far as I understand your question you want the image to auto adjust when the browser is resized. We can achieve this using the css below.
.image-box img {
width: 100%;
}
If we only specify the width of the image the height will be auto calculated. It will maintain the aspect ratio for the image. Width 100% will exactly fit the container of the image. This code may not work for background image.
Your problem is that at load time, the img has a height=0 and width=100%. So, you have an empty image when the page loads.
You can consider using an Image Preloader:
ImageLoaderJS
PreloadJS
If you want all the images to have the same height, then use the Fake Crop jQuery plugin. Actually, it doesn't crop the image file, but the image gets a "cropped" effect using CSS Positioning properties.
Also, you can assign a min-height to the container:
.product-view .img-responsive {min-height:352px; background:#fff;}
You can also look into Lazy Loading:
LazyLoad
Lazy Loading Images
...
use bootstrap or #media queries
/* Small devices (tablets, 768px and up) */
#media (min-width: #screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
#media (min-width: #screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.
#media (max-width: #screen-xs-max) { ... }
#media (min-width: #screen-sm-min) and (max-width: #screen-sm-max) { ... }
#media (min-width: #screen-md-min) and (max-width: #screen-md-max) { ... }
#media (min-width: #screen-lg-min) { ... }
http://getbootstrap.com/css/#grid