Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I'm basically trying to embed an iframe into one of my sites. When i put the iframe on the site it doesn't work on mobile - meaning the responsiveness is lost and its not scaling according please check here
BUT, when i put the same iframe on a PLAIN HTML file, its completely responsive. check here
can you tell me what's wrong here please? I'm thinking some CSS conflict?
Appreciate any help!
When I go to your website, the iframe is not responsive, because the width and height of the iframe are set inline. You need to set these (or alter them) via the CSS to make it responsive.
That the iframe in the plain HTML file is 'responsive' is because it just shows the whole page, because there's no viewport set. (In your main website, this is the viewport: <meta name="viewport" content="width=device-width, initial-scale=1">). It feels responsive, but is not.
So what you need to do:
Remove the inline height and width set on the iframe.
Add code to your CSS to make the iframe responsive. See my small example below on how to do this. Play around with it to fit it your needs (and viewports).
.iframe-container {
position: relative;
width: 100%;
padding-bottom: 50%;
background: lightgrey;
}
.iframe-container iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 1px solid red;
}
<div class="iframe-container">
<iframe src="http://spreadshirt.com/"></iframe>
</div>
Just add #view=FitH after the pdf URL in your iframe.
Example:
<div class="iframe-container">
<iframe src="http://example.com#view=FitH"></iframe>
</div>
Then use the above CSS as mentioned by Roy. It will fit the pdf as per responsive screen.
Related
I have a Wordpress blog where my featured images & videos extend outside of the post, but I've run into a problem.
Whenever I'm embedding videos outside of YouTube, the embedding messes up completely. And I'm not sure why.
I have two examples here, please check the link: https://imgur.com/a/4wnjY
The css line that controls the width is .fluid-width-video-wrapper, and the code is:
width: 113% !important;
height: 51px;
margin-left: -6.4%;
Live demo here:
Correct article: https://www.droppet.se/visuellt/en-man-uppfostrar-en-ekorre/
Incorrect article: https://www.droppet.se/sport/cavani-och-mbappe-kombinerade-till-ett-drommal/ (password wvideo)
Change the width: 113% to 100% and get rid of margin-left
.fluid-width-video-wrapper {
width: 100%;
height: 51px;
/* margin-left: -6.4%; */
margin-bottom: 7px;
}
Your container is the desired size.
The problem is inside the iframe; the div .media-container has these CSS rules, which prevent the video from being the full width of the framed document:
height: 56.23vw;
max-width: 177.85vh;
Removing the max-width rule from that class corrects the problem.
But since you're framing a third-party site, you won't be able to remove that class; instead you'd need to tweak the height of the iframe so that the framed site's rules match your layout. Changing your .fluid-width-video-wrapper height to any height larger than 85px seems to do it. (May not be the ideal way to fix this, though; I haven't looked closely enough at the rest of your code to understand why that height rule exists.)
I used part of the wordpress theme of another developer and now this slider content is floating to top
I want to center content vertically and horizontally with padding on all sides padding:100px;
Someone can visit my site and help with centering this block? This is url of my mywebsite, please share some knowledge and hope I will solve this problem.
I looked through your code, (thank god for Inspect Element on Google Chrome!) and it seems you have the header inside the body of the code, try moving the page header above the body in your html. I have found this to work for me in some cases.
Also next time try adding code relevant to the question to your OP, will help get faster and better answers
EDIT: You can centre it horizontally by changing the left and right tags in the css:
.//div class here {
left: 10%;
right: 10%;
width: 80%;
}
EDIT 2: Try this, im not sure if it will work but its worth a show:
.//div class here {
left: 10%;
right: 10%;
width: 80%;
height: 80%;
top: 10%;
bottom: 10%;
}
Try doing the steps explained on this site: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/. You will most likely want to apply this to:
.image img
which is the CSS selector for the div with a class of image containing an image tag. This may be too general though and I actually recommend giving your image an ID and targeting that.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
This issue has had me scratching my head for a few days now. I have a website with a set CSS background with no scrolling - works well. However, on pages that are fairly long there appears an exact duplicate of the background, seemingly scrolling in FRONT of the other background.
You can see it illustrated on this page:
http://www.joyrocks.com/corporate/
I've scoured through the CSS and I'm sure I'm missing something simple, but I was hoping some fresh eyes could point me in the right direction. Cheers!
Edit: Got it solved! Sorry this may have been off-topic. Will keep that in mind in the future!
It took me a second to realize what was happening here. Now I'm not sure why it appears to be duplicated like that. Could have something to do with the background being fixed. I think your main issue here though is the body/html height.
body,html{
height: 100%;
}
That only sets the height of the viewport meaning there is still a lot of overflow that's not being covered by that.
I changed height to min-height and it seemed to have fixed the problem :)
body,html {
min-height: 100%;
}
You have a body:after rule that is applying the same style as your body.
There are two offending rules causing this:
body, body:after {
background: url('/wp-content/uploads/2014/05/background-new-2.jpg') top left fixed repeat;
}
body:after, ul.tabs li a.active:after {
content: "";
background: #FFF;
position: absolute;
z-index: 99;
left: 0;
bottom: 0;
right: 0;
height: 100%;
width: 100%;
z-index: -1;
}
Remove the body:after definitions from those and you will be fine.
You must delete body, from this css line:
body, #section-tophat, #section-footer, #section-sub-footer
Please excuse me if there are any mistakes in the following code or with my question, I don't know much about code but am learning :). Sorry for spaces in links and lack of these things - < - really struggling posting code :)
On my website http:// second to nature .co.uk/en/ I am trying to create background images with ivy down both sides of the website. Is it a prestashop website.
I did manage to achieve this with the following css code, however it would not work in ie 6-8 - because those browsers do not support css3.
background:url(http:// second to nature.co.uk/img/backgroundleft.jpg) top left fixed
no-repeat, url(http:// second to nature.co.uk/img/backgroundright.jpg) top right fixed no-repeat;
Therefore after some researching, I tried to create the wanted effect with two divs:
<div id="container">
<div id="inner-container">
</div>
</div>
And then use the following css to implement this.
And as you can see if you visit the site, the left image is shown properly, but the right does not show up.
#container {
background: url(http:// second to nature.co.uk/img/backgroundleft.jpg) repeat-y;
position: fixed;
top: 0px;
left: 0px;
width: 130px;
height: 1000px;
}
#inner-container {
background: transparent url(http:// second to nature.co.uk/img/backgroundright.jpg)) repeat-y;
position: fixed;
top: 0px;
right: 0px;
width: 130px;
height: 1000px;
}
Can anyone see where I am going wrong or have a fix? Help would be much appreciated.
Many thanks
You have a typo in your CSS:
url(http://secondtonature.co.uk/img/backgroundright.jpg))
There is a double )) at the end of the URL where there should be only one.
HOWEVER ... your HTML is all messed up, and there's a better way to do this. Firstly, you have a whole bunch of meta tags and other asset links inside your body element, when they should all be up in the head.
A better way to do this would be to wrap two divs around your content (they would be 100% width by default) and place the bg images on each of those.
You could use Modernizr and then us CSS3 border image. Then the border image will show up in IE6, 7 and 8.
A shame that you have IE6 users to worry about. It's such a bad, buggy and unsafe browser.
http://modernizr.com/
Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 10 years ago.
Improve this question
I am a css newbie. I just draw a basic HTML page with following code:
<html>
<head>
<title>Hey</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header class="top-menu"></header>
<div class="container">
<div class="left-side"></div>
<div class="main-content"></div>
</div>
<div class="foot"></div>
</body>
</html>
Here is style.css:
.top-menu{
position: fixed;
top: 0;
left: 70px;
right: 70px;
height: 50px;
background-color: #000000;
}
.container{
margin: 70px 70px 20px 70px;
display: inline-block;
width: 91%;
}
.left-side {
width: 30ex;
min-height: 30ex;
float: left;
background-color: blue;
}
.main-content {
width: 80ex;
float: right;
background-color: red;
min-height: 100ex;
}
.foot {
background-color: green;
height: 5ex;
width: 91%;
margin-left: 10ex;
}
The purpose is straightforward.But the css looks crap.even some problems.I want to ask some questions:
1.The left and right margin of container is 70px, and the same to top-menu, but from chrome page view,why does it not aligned?
2.Why does it appear horizontal scroll bar when I set 'container''s width to 100 percent (same as foot part)?
3.If I don't set container's display to 'inline-block', why does the foot part flying to the air? (even I set it to 'block')
4.Could you guys give me a better css style code?
I understand that you prefer to use CSS3 and the latest html standard but the <header> tag has not been adopted by that many browser vendors. I would stray away from using it. IE9 is the first IE to adopt it and there is plenty of users still on IE6/7.
Take <header> out and replace with a normal <div class="header">...</div> and then reference using css .header { }.
To answer #2 - you can not state width: 100%; and then add left/right margins and not expect a horizontal scroll bar. In principle, the container will span beyond 100%.
I am not sure why you are adding display: inline-block; to the container div. Only inline elements should ever have this declaration (i.e. text elemnts). Is there a specific reason why so?
Also, when you are first creating an html template and testing it out, make sure that you always add content into the divs and not simply leave them blank. Adding min-height: ... is not a fool-proof system. I always add in fake text - "hello hello" suffices.
Lastly, add an appropriate html doctype. Perhaps you trimmed it for the question part but is this xhtml or html? This relates further with the use of <header>. Not all doctypes support <header.
2.Why does it appear horizontal scroll bar when I set 'container''s width to 100 percent (same as foot part)?
Because, you have margin which makes the total width more than 100%.
Apart from what's been already said, have you tried to use the chrome inspector to tackle theses issues? Just point the mouse on the page, right click and choose Inspect Element. There you can enable/disable some CSS properties and quickly find out what's wrong.
For firefox, the equivalent is http://getfirebug.com/
As for your layout problem: don't worry, this has been a real pain for all of us when we've started. If your point is not to actually learn css, if all you want is to make this to work once and for all and in time, my advice is: use a CSS framework with a grid.
CSS frameworks have usually a neat feature we call "the grid". It will allow you to set a layout like yours in 5 minutes, and stop worrying about how this div floats in this or that browser.
Plus: this depends of the website you want to use, but usually when you use a grid, what you do will by sexy magic look less amateur. (if you have a designer background maybe you already know this)
Take a simple Framework to start. Everyone has its favorite but I can recommend BluePrint to start. And here is a small demonstration of its grid system super powers ;)