My web theme has a slider built in that wasn't full width. I did some research and to make it full width I added a 1400px wide image and set the containers css to:
width: 100%;
padding-right: 0px;
padding-left: 0px;
However it doesn't scale to smaller screen sizes like I was hoping. I did some research but can't find anything that works or is that specific. How do you think I can fix this and make it look the same on all screens.
instead of width set max-width
body {
margin: 0
}
div {
max-width: 1400px;
margin: auto;
}
img {
max-width: 100%
}
<div>
<img src="//placehold.it/1400x900" />
</div>
Related
I have been tasked with styling a banner, however the banner itself is a third party tool with severely limited styling options. It's probably easier if I share an example of what I'm working with and then talk through the limitations and what I'm trying to achieve.
body {
margin: 0;
}
.main {
height: 200vh;
min-height: 250px;
width: 1200px;
background: #cdcdcd;
margin: 0 auto;
padding: 20px;
}
<div class="main">
Main website content
</div>
<div class="banner" style="position: fixed; width: 100%; max-width: 600px; height: 80px; background: gray; bottom: 20px; right: 20px; color: white; padding: 20px;">Banner content</div>
Here is a version in Codepen if that's easier.
As you can see, the main website content is centered and is responsive up to (in this case) 1200px, after which the width becomes fixed. The banner needs to always sit at the bottom right, but it should remain within the constraints of the main website content. When the viewport is less than 1200px this solution works fine, the issue I have is of course that on viewports wider than 1200px, the banner breaks out of the constraints of the site.
Generally this wouldn't be an issue, it's easily fixed with calc() and a media query to get the viewport width, but now come the limitations of the banner tool:
I can only add inline CSS via the tool to the element banner, there is no wrapper or inner element I can target
I cannot add CSS to the site that the banner will appear on
I cannot use JavaScript, either on the site or in the banner tool
I can't affect the HTML mark-up in any way (e.g. I can't put the banner inside main
Sorry for the long introduction but hopefully that explains my dilemma. My question is this: is it possible, using CSS calc(), to determine when my viewport is above 1200px and to add (half) that amount to my right offset without affecting the offset when the viewport is less than 1200px, or is there just no solution to this?
Here is one idea that rely on the use if min() in order to define the max-width. You make it either 600px (for bigger screen) or 50% (for small screen) and then adjust the position using translate after centring the element:
body {
margin: 0;
}
.main {
height: 200vh;
min-height: 250px;
width: 1200px;
background: #cdcdcd;
margin: 0 auto;
padding: 20px;
}
* {
box-sizing:border-box;
}
<div class="main">
Main website content
</div>
<div class="banner" style="position: fixed; width: 100%; max-width: min(50%,600px); height: 100px; background: gray; bottom: 20px; right: 0;left:0;margin:auto;transform:translate(50%);border:1px solid red; color: white; padding: 20px;">Banner content</div>
The support is still not good (https://caniuse.com/#feat=mdn-css_types_min) but shortly it will be available on Firefox and all the major browser will be covered.
I have a fixed height on all my images and need to keep the image in proportion as the screen width gets smaller.
#owl-demo .item img {
display: block;
width: auto;
height: 300px
}
This works fine until I need to put a margin in between the images.
#owl-demo .item {
margin:0 10px 0 10px;
}
The margin won't show and the images are side by side still. The margin will show if I put width: 100%
#owl-demo .item img {
display: block;
width: 100%;
height: 300px
}
But then the image is no longer in proportion.
I tried with Owl's own demo and this is the case. If you inspect one of the images and change it to the code at the top with width: auto you will see the margin no longer works. You will need to remove the max-width: 100% from the img tag from bootstrap also.
http://owlgraphic.com/owlcarousel/demos/images.html
Looks like you're using version 1.3.X
Try upgrading to version 2 and you'll be fine.
My website uses this code for width and it is shown perfectly on a 15.6 inch screen, but for mobile screens and netbook & tablet screens of 10 inch, the website is completely messed up. It uses a fixed width, I tried to make it auto, 100px but no success. here is the css code:
#container {
width: 1180px;
margin: 5px auto;
text-align: left;
background-color:#FFF;
}
Website is HERE
there is a background image and container is placed over it. How to modify this code to have auto width for different screens?
PS: Script is opencart.
Try using a percent rather than a fixed width in your CSS.
#container
{
width: 95%;
margin: 5px auto;
text-align: left;
background-color:#FFF;
}
If you want to use different CSS depending on the device it is being viewed on, your best bet is to use Media Queries as suggested by #Ruddy
Try this below css.. ( for all width apply in max-with:100% )
#container {
width: 1180px;
max-width: 100%;
margin: 5px auto;
text-align: left;
background-color:#FFF;
}
The code is here:
<div class="entry-page-image">
<div class="featured-image-container">
<?php the_post_thumbnail('large'); ?>
</div>
</div><!-- .entry-page-image -->
Effected by this css:
.entry-page-image { position: fixed; display: inline-block; top: 0; margin: 0 0 30px 30px; margin-left: 260px; float:left; width: 100%; }
.featured-image-container { height: 100%; width: auto; }
.featured-image-container img { height: 100%; width: auto; }
However in Firefox the browser takes the standard 1024px high image, and wont scale it down to be 100% of the browser window height. I'm aware this is quite a common problem, but I can't seem to rephrase my code to the right effect.
Anyone fancy shifting it about for me?
The issue here is that height:100%; on .featured-image-container sizes the height relative to the height of its container.
In this case, the height of the container is equal to the height of the content in the container (the natural height of the image).
If you manually set the height on html,body to 100% then you'll find that the height of your div is now as you'd expect.
Example: http://jsfiddle.net/EyLHG/
html,body{
height:100%;
}
.container{
width:auto;
height:100%;
border:1px solid red;
}
img{
min-height:100%;
}
Update
Also, setting the width of the image to auto will cause the width to be the default width of the image rather than of the container. Setting the width to be 100% will fix this scaling issue:
Example: http://jsfiddle.net/EyLHG/2/
just saw your website, I think there is image still in below the browser as well, I think you might need to add position:relative; to .entry-page-image
So I'm trying to build a pure CSS responsive square (well actually I'm trying to build a circle but that's easy once I've got the square.)
In other words:
I want a div that has a height that is a percentage of the body and a width that is equal to that (or vice versa).
The div also needs to have another div inside it which can contain content and overflow: auto.
Lastly, the div can never exceed the height (or width) of the body or viewport.
So far, I have got some solutions working partially (i.e. in portrait but not landscape) using a 1px transparent .gif as an img to fill out a wrapper div. Not ideal semantics but I don't see how this can be done without it.
<div class="wrap">
<img src="http://www.neurillion.com/p/35/static/media/images/1x1t.gif" />
<main>
<div class="content">
<h2>Title</h2>
<p> Lorem... etc. </p>
</div>
</main>
</div>
Here are my CSS solutions and what is wrong with them:
This works except it exceeds the height of the body in landscape (max-height in any of the elements does not solve this):
.wrap {
background: blue;
margin: 10% auto;
width: 70%;
position:relative;
text-align:center;
}
.wrap img {
border: 1px solid black;
height: auto;
width: 100%;
}
main {
background: red;
display: block;
border-radius:50%;
height: 100%;
width: 100%;
position: absolute;
top:0
}
main div {
background: green;
overflow: auto;
display:inline-block;
height:70%;
width: 70%;
margin-top:15%;
}
Codepen
Next I added a landscape media query to swap around the height and width values. Same problem.
#media(orientation:landscape) {
.wrap {
margin: auto 10%;
height: 70%;
width: auto;
}
}
Codepen
At this point I started looking into .wrap's parent elements , namely the body and html. (Resource on the difference between them.) I added height and max-height: 100% to both of them, but no joy. I've also tried adding another div container as I thought it might be easier to control the height, but that doesn't seem to be doing much either.
And now I'm pretty much out of options. I'm fairly sure the solution is something to do with the html and body elements and the way they are so eager to expand vertically but I'm not really sure how else to stop them doing so.
Any help much appreciated.
You can use vw, vh and vmin to scale the square:
Demo: http://jsfiddle.net/r9VQs/
CSS (changed part only):
.wrap {
background: blue;
margin: 0 auto;
max-width: 90vh;
max-height: 90vh;
position:relative;
text-align:center;
}
You can also use vmin (which gives better results but is less well supported) and forego the image:
Demo: http://jsfiddle.net/r9VQs/2/
CSS:
.wrap {
background: blue;
margin: 0 auto;
width: 90vmin;
height: 90vmin;
position:relative;
text-align:center;
}
vh, vw and vmin are units equivalent to 1% of their respective viewport dimensions (vh is viewport-height, vw is viewport-width and vmin is whichever has a smaller value).
Please see http://caniuse.com/#feat=viewport-units for browser support.