I have an webpage with faulty responsive design, that I am trying to load into my <iframe>. That page is completely broken below certain width (key parts missing). Unfortunately, I have no control over that particular web page design.
On my side, I am using <iframe> with responsive design as follow:
HTML:
<div id="wrapper">
<iframe src="faulty_page.html"></iframe>
</div>
CSS:
#wrapper {
width: 100vw;
overflow: hidden;
position: relative;
}
#wrapper iframe {
width: 1000px; /* The loaded page is brogen below width of 1000px */
position: absolute;
top: 0;
left: 0;
--scale: calc(100vw / 1000px); /* This is invalid */
transfrom: scale(var(--scale));
}
The problem is, that CSS calc() function does require the argument after division to be a number and not width, making the expression calc(100vw / 1000px); invalid.
Is there a way to load a fixed width page into responsive design <iframe>? I know, that I can use JavaScript to work around the limitation of CSS calc(), but I would like to stick to pure HTML/CSS if possible.
An ugly workaround might be to use #media to get the idea how many pixels is 100vw and gradually change the value of --scale variable.
#media only (min-width: 950px) and (max-width: 999px){ --scale: 0.95}
#media only (min-width: 900px) and (max-width: 949px){ --scale: 0.90}
#media only (min-width: 850px) and (max-width: 899px){ --scale: 0.85}
etc...
But that is a solution I am also trying to avoid
Related
i'm new to html and css and i've been having a few issues dealing with media queries.
Basically, i have a website that only "actually works" when its been visualizated in a 1920x1080 resolution, so i created a few media queries on my css to support other resolutions as well. I'm having a little bit of trouble on making a media querie to support the 1280x1024px resolution. When the browser is not on fullscreen, on windowed mod, none of my changes written in the css are applied. But when i go fullscreen, everything works just fine.
Also, i cant set 1280 width for this cuz it'll mess up my other media querie which was created for the 1280x768 resolution
Can anybody help me with this please?
Appreciate it.
This is how it looks on windowed mode, with none of my changes written in the CSS applied
This is how it looks on fullscreen, now, its actually doing what it's supposed to do
#media screen and (height:1024px) {
.white_round_background{
margin-left: 320px;
height: 170vh;
width: 160vw;
background-color: rgb(197, 183, 183);
}
.menunav {
left: 38%;
top: 4%;
}
.system_selection {
margin: 420px 0 0 0px;
height: 95px;
}
#logo_sliding_menu {
margin-top: 710px;
}
}
Hum... Just a guess at this point, but pay attention to that: the sequential order of css code matters.
You can have a lot of media-queries definitions, but they have to be in a specific order (from the highest to lowest). EG:
#media only screen and (max-heigth: 600px) {}
and only then
#media only screen and (max-width: 500px){}
ALSO, instead of just a specific height, maybe try to use the max-height property (which will be applied to devices having a resolution small than that height. Because aiming just one height of 1024px will not work on windows being 1023px height or less or 1025 or more...
.yourClass {
/* CSS applied to all devices above 1024px height */
}
#media only screen and (max-width: 1024px){
.yourClass {
/* CSS applied to all devices smaller than 1024px height */
}
}
#media only screen and (max-width: 955px){
.yourClass {
/* CSS applied to all devices smaller than 955px height */
}
}
#media only screen and (max-width: 500px){
.yourClass {
/* CSS applied to all devices smaller than 500px height */
}
}
/* And so on */
You can also play with min-height and max-height in the same query :
#media screen and (min-height: 400px) and (max-height: 900px)
{
.yourClass {
/* CSS applied to all devices
no less than 400px height and no more than 900px height */
}
}
I have a web project, how do I make the images on my website responsive in any display? Will this is my code is produce an error?
html code
<img src="image/Al-Khawarizmi.jpeg" class="img-load">
css code
#media screen and (max-width: 750px) {
.img-load {
width: 100%;
height: auto;
}
}
You have a few options when it comes to making your image responsive.
With the current settings you have of width: 100% and height: auto, your image is already responsive without the media query.
Your image is not longer responsive if you start using px as a unit of measure for your height and width.
You do haven't need to #media, if you want image width to cover the entire page width, in any device. only:
HTML:
<img src="image/Al-Khawarizmi.jpeg" class="img-load">
CSS:
.img-load{
width:100%;
}
You must use #media, only when you want your image to have different widths in any device.
For example, if you want the width of an image to be 50% on the large screen, and 100% on the smaller screen, you can set:
CSS:
.img-load{
height: auto;
}
#media screen and (max-width: 750px) {
.img-load{
width:100%;
}
}
#media screen and (max-width: 1200px) {
.img-load{
width:50%;
}
}
I am trying to make a responsive webpage with my site here: https://chunzg.github.io/about.html
I have made a flex container for the photo and text.
Have used the media query below to first test on my laptop screen :
#media only screen
and (min-device-width: 300px)
and (max-device-width: 600px)
and (-webkit-min-device-pixel-ratio: 2) {
.sidebar {
width: 100%;
}
.photo {
width: 100%;
}
.text {
width: 100%;
}
}
but it doesn't work - nothing changes. I would like the sidebar, photo and text to be stacked vertically on top of one another if I am looking at it on a narrow screen.
I know I must be doing something wrong but just don't have enough experience to know what needs to change
Thanks
Hey I am giving a reference:https://www.w3schools.com/css/css3_mediaqueries_ex.asp
I couldnt understand the exact question but I think it should be like this:
/* On screens that are 992px wide or less, go from four columns to two columns */
#media screen and (max-width: 600px) {
.sidebar {
width: 100%;
}
.photo {
width: 100%;
}
.text {
width: 100%;
}
}
In my code I scripts lets webpage to change width by 100 if the screen size is less than 600 or equal to 600.(Maybe it can be usefull for your ipad or small devices screen)
Also why did you used min and max at the same time?
Note that I am not professional but I have had some experiences with css so that my answer maybe could not be the solution. But lets try this.
I'm trying to add a banner ad to run along the left side of my blog post.
However my attempts so far have resulted in it appearing above the content pushing the blog post content down the page.
Live link: https://www.moneynest.co.uk/pension-crisis-uk/
Added into head:
<div id=”LeftFloatAds”><img src="https://www.moneynest.co.uk/wp-content/uploads/2018/12/160x600b.png" alt="PensionBee sidebar ad"></div>
Added into CSS
#media only screen and (min-width: 1400px) and (max-width:500px) {
#LeftFloatAds{
left: 0px;
position: fixed;
text-align: center;
top: 200px;
}
}
FYI I followed this guide.
First of all, replace the position of ... move it inside your main content wrapper.
Then apply this css,
As you want to show this only on wider screen then use this,
#media only screen and (min-width: 1400px) {
#LeftFloatAds {
position: fixed;
display: block;
overflow: hidden;
left: 0;
top: 200px;
}
}
This will hide the banner on the screen smaller than 1400 pixels.
#media only screen and (max-width: 1399px) {
#LeftFloatAds {
display: none;
}
}
First, be careful with the div id quotes.
<div id=”LeftFloatAds”> should be <div id="LeftFloatAds">
Then, with that media query you are giving those properties to the element only when the screen is at least 1400px but less than 500px, which is impossible. Try it like this:
#media only screen and (min-width: 500px) and (max-width:1400px)
Here is a link to the codepen for the code that I am working on. I am trying to get it so that if the device width is less than 540px, the width of the wrapper goes from 33.33% to 100%, however it doesn't seem to be doing so.
My media query is as follows:
#media only screen and (max-width: 540px) {
#wrapper {
width: 100%;
}
}
My normal css for the wrapper is as follows:
#wrapper {
width: 33.3%;
margin: 0 auto;
position: relative;
}
You have to put that media query BELOW the other rules in the stylesheet. The way you have it now (i.e. media query at the beginning of your stylesheet) it's overwritten by the general rule (containing width: 33.3%;) which follows below it.
https://codepen.io/anon/pen/GyPRVG