So I am creating this responsive website, and the images were fine at first, but then I started working on other parts of the site and when I come back to the main page the first 2 images are small and the 3rd image is the correct size. I am not quite sure what happened. I used inspect element and the only attributes applied to the images are the ones mentioned below except the .left one. What seems to be the problem?
Worth mentioning that if I increase the width (now at 70%) all of the images grow at the same rate. The image size also comes back to normal as soon as I change the text of the image below. It seems that longer text makes the image grow bigger and vice versa.
Thank you in advance for the help and
HTML
<div class="hottest">
<div>
<img src="img/main-page/444.jpg"/>
<p>J-Cole: KOD</p>
<button class="btn3">Check out </button>
</div>
<div>
<img src="img/main-page/444.jpg" />
<p>Jay-Z: 444</p>
<button class="btn3">Check out </button>
</div>
<div>
<img src="img/main-page/hus.jpg" />
<p>J-Hus: Big Conspiracy</p>
<button class="btn3">Check out </button>
</div>
</div>
CSS
.hottest {
display: flex;
justify-content: space-between;
color: white;
margin: 3vw;
margin-bottom: 10vw;
width: 100%;
}
.hottest p {
padding-left: 1vw;
margin: 1vw;
font-size: 3vw;
}
.hottest .left {
float: left;
margin-right: 2vw;
}
.hottest a {
text-decoration: none;
color: black;
}
.hottest img {
width: 70%;
}
the image width is 70% of it parent width, and the text makes the parent width bigger because you are using flex. flex makes the div width only as big as the content.
try giving your divs flex-basis: 100%; which should give your divs equal widths.
The text text would enlargen your parent div container. If you set the divs to a specific width and height, does the problem still occur?
Related
I have this html and this css.
.entry-content > .greyfruitdrawing {
height:2000px !important;
width:2000px !important;
margin-top:40px;
}
.redletters1 {
font-size:40px;
opacity:0.7;
color:red;
position:relative;
top: 20px;
font-weight: bolder;
line-height:1.6;
text-align:justify;
}
<div class="greyfruitdrawing">
<img src="http://4309.co.uk/wp-content/uploads/2019/12/IMG_20191205_220426-300x201.jpg" alt=""width="300" height="201"class="alignnone size-medium wp-image-6978"/>
</div>
<div class="redletters1">SOME TEXT.</div>
The problem is that a) it won't expand by the size css is telling it to. b) elements are interacting in a way they shouldn't. Adjusting greyfruitdrawing affects position of redletters1
Site: https://4309.co.uk/about-us/
Set the height and width of an outer container and then give the image itself a height and width of 100%:
.container {
text-align: center;
width: 2000px;
height: 2000px;
margin-top: 40px;
}
.greyfruitdrawing img {
height: 100%;
width: 100%;
}
.redletters1 {
font-size: 40px;
color: rgba(255,0,0,0.7);
font-weight: bolder;
line-height: 1.6;
}
<div class="container">
<div class="greyfruitdrawing">
<img src="http://4309.co.uk/wp-content/uploads/2019/12/IMG_20191205_220426-300x201.jpg" />
</div>
<div class="redletters1">SOME TEXT.</div>
</div>
Edit
There are a few problems with what you are doing here. First off, height and width are not properties that are inherited. In your example, you are defining the height and width of the div surrounding your image in your css, not the image itself, which is why it is affecting the "position" of the red lettering. The div is getting bigger and pushing the text downwards.
Simply move the greyfruitdrawing class inside your image tag instead of your div surrounding it.
Also, it is generally bad practice to use the !important property, although I don't know what the other classes you are linking to do, so maybe they are needed to override some presets you are using.
You have many different classes and properties trying to change the size of the image. I would recommend you do something simpler.
Either change the height and width properties within the tag to match how big you want the image to be, or remove these properties and define it in your css.
Alternatively, if you want the image to fill the size of the div then I would recommend the answer by symlink.
The reason this is affecting the position of the red lettering is because you are making the div bigger, which is pushing the letters down the page. You can't see what is happening because the div is the same color as the background.
Using css to define height and width:
<div>
<img src="http://4309.co.uk/wp-content/uploads/2019/12/IMG_20191205_220426-300x201.jpg" class="size"/>
</div>
//notice the class is in the <img> tag and not the <div> surrounding it.
.size {
height: 2000px;
width: 2000px;
}
or defining height and width within the tag:
<div>
<img src="http://4309.co.uk/wp-content/uploads/2019/12/IMG_20191205_220426-300x201.jpg" height="2000" width="2000" />
</div>
I have the following: jsfiddle.net
What I'm trying to do is have the image float left of the text such that it fills the parent (.box). Note that the .box can vary in height depending on the number of lines of text.
The end result should look like this:
How would this be done?
.box {
position: relative;
display: block;
width: 600px;
padding: 24px;
margin-bottom: 24px;
border: 2px solid red;
}
.img {
float: left;
}
.text {
font-size: 14px;
}
<div class="box">
<div class="img" style="background-image: url('https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg');"></div>
<div class="text">This box is one line.</div>
</div>
<div class="box">
<div class="img" style="background-image: url('https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg');"></div>
<div class="text">This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines.</div>
</div>
You can use display: table on the parent element and display: table-cell on the children.
PLUNKER
SNIPPET
<!DOCTYPE html>
<html>
<head>
<style>
html,
body {
height: 100%;
width: 100%;
}
figure {
display: table;
width: 600px;
height: auto;
margin-bottom: 24px;
border: 2px solid red;
}
img {
float: left;
display: table-cell;
min-height: 100%;
margin-right: 20px;
}
figcaption {
font-size: 14px;
height: 100%;
}
</style>
</head>
<body>
<figure>
<img src="http://i.imgur.com/MhHgEb1.png">
<figcaption>This box is one line.</figcaption>
</figure>
<figure>
<img src="http://i.imgur.com/MhHgEb1.png">
<figcaption>This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines. This box has two lines.</figcaption>
</figure>
</body>
</html>
As far as I know there is no HTML/CSS only solution to make this work - correct me if I'm wrong. The OP wants to have an image with unknown size dynamically scaled to the parent's container's height. This container on the other hand depends dynamically on the text length and has no fixed height. The image size can vary, the text size can vary.
Here a proof of concept solution using jQuery and <img> instead of background-image with the following result:
HTML:
<div class="box">
<img class="img" data-src='https://placehold.it/500x500'>
<div class="text">This box is one line.</div>
</div>
JavaScript / jQuery
var $boxes = $('.box');
var $imgs = $boxes.find('.img');
for (var i = 0; i < $boxes.length; i++) {
var heightParent = $boxes.eq(i).outerHeight() - 4;
// -4 because of border 2px top + 2px bottom
$imgs.eq(i).attr('src', $imgs.eq(i).attr('data-src'));
$imgs.eq(i).height(heightParent);
}
CSS (only changed part):
.img {
float:left;
margin-left: -24px;
margin-top: -24px;
margin-right: 10px;
}
It's not such a trivial thing to achieve what you want as you don't want to set height. Not on the image and not on the parent container.
Problems using background-image:
With the background-image approach it would easy be possible to position the image correctly scaled to the left with position:absolute, but the margin to the right (to the text) would not work, as the width can be different.
Problems using img:
On the other side with the use of <img> you have the problem, that the parent <div> will always be in the original height of the image, as long as no parent has a fixed height - which is the case in your example.
JavaScript for partly making it work:
To avoid this you can avoid the creation of the image on page load by setting the url to a data attribute, I called it data-src. Now when the page is load, you can look for the parent's <div> natural height. Next you pass the URL from the data-src attribute to the src attribute so that the image is rendered.
As we know the former parent's height we can set it as the image height.
The CSS negative margins are there to undo your setting of padding: 24px on the parent's container so that the image is correctly positioned. If you ask yourself why I subtract 4 from the height - this is because you want your image to be within the border, so we need to subtract the 2px to the top + the 2px to the bottom of your border.
Note: Of course this solution would not work responsive without further scripting, but your parent <div> seems not to be responsive anyway.
Fiddle: https://jsfiddle.net/av9pk5kv/
Problems with the layout wish and the above example:
You could argue that the wished layout is not worth aspiring to in the first place, it will not work with more amount of text if you don't change something else. At some point there is so much text, so that it's just impossible to place the image filling the parent:
To avoid it partly you would have to remove the fixed width of the parent.
But the same (or similar) result will happen if the dynamically including of the image via JavaScript leads to more text lines as there were before (the text is squeezed).
How would I solve these problems: I'd use another layout.
My header is structured as a table. I finally managed to make it so that the last li is floated to the right and X % to the left while still being compatible with different screen sizes. However, my 'profile picture' div is resizing and resembles a squished circle as a result. How do I make sure that the div is always 40px in width and height (if this is the right way to go around it)?
CSS
#hdr-profile {
align-items: center;
border: 1px dotted red;
display: flex;
margin-left: auto;
white-space: nowrap;
}
#hdr-profile-pic {
width: 40px;
height: 40px;
background: white url("https://scontent-lhr3-1.xx.fbcdn.net/hphotos-xfa1/v/t1.0-9/11760274_1109394289087955_3712628479579288500_n.jpg?oh=ff64d9b1a44338d53d414459ff92aa71&oe=574558FA") no-repeat;
background-size: 100% 100%;
border-radius: 50%;
cursor: pointer;
}
HTML
<li>
<div id="hdr-profile">
<div id="hdr-profile-pic" title="My Profile">
<div id="hdr-profile-country" title="Liam is in Spain"></div>
</div>
<span id="hdr-profile-name" class="select">Liam Macmillan</span>
<i class="material-icons md-26 icn-lft icn-hvr">arrow_drop_down</i>
</div>
</li>
An easy way would be to add a !important after the 40px in your css of the profile picture
I suspect it's because of the size of the drop-down. In the JSFiddle that Nenad Vracar linked, the picture comes in totally fine. Don't use !important to force the size, it's bad practice and causes unexpected behavior. Instead, try experimenting with the size of the dropdown. I don't have the rest of your code, or I'd have looked into it.
I am making a fairly simple responsive website. I have a logo div that keeps the logo centered on small screens, and to the left on big screens. Everything is working how I want it to, (try resizing the jsfiddle) except that I want the logo div to scale down to it's min-width before the links wrap to the next line. I'm not sure how to word this, but I want the logo div to resize based on if the links are pushing it (if they have enough room). When it reaches it's min-width, then the links should wrap. Not sure if this is possible, but I figured I'd ask anyway.
Here is the jsfiddle.
The html:
<div class="header">
<div class="logo">logo</div>
<div class="link">link one</div>
<div class="link">link two</div>
<div class="link">link three</div>
</div>
The css:
.header {
text-align: center; /* Centers the logo text, and centers the links between the logo div and the other side of the page.*/
}
.logo {
max-width: 300px;
min-width: 100px;
width: 100%; /* It is always the min-width without this*/
background-color: red;
display: inline-block;
float: left;
}
.link {
display: inline-block;
background-color: green;
}
I hope I was clear, I'm still learning. Let me know if I need to add any more details.
I went looking some more and found flexboxes. Got them to do exactly what I wanted.
http://jsfiddle.net/3525C/10/
My new HTML:
<div class="header">
<div class="logo">logo</div>
<div class="nav">
<div class="link">link one</div>
<div class="link">link two</div>
<div class="link">link three</div>
</div>
</div>
and CSS:
.header {
text-align: center;
display: flex;
flex-flow: row wrap;
}
.logo {
flex: 1 0 auto;
min-width: 100px;
background-color: red;
}
.nav {
flex: 1 1 auto;
background-color: lightgray;
text-align: center;
}
.link {
display: inline-block;
background-color: green;
}
Thanks hexalys for helping me get it working.
The only real thing that responds the way you're talking is a table. Table cells have the capability of being flexible with their width.
You can use CSS to make this happen. It's a more modern display, so not all browsers (looking at you, older IE) will support it. But this should get you started: http://jsfiddle.net/mfvf8/
Here's what I added as a proof of concept:
.header
{
display: table;
width: 100%;
}
.header > div
{
display: table-cell;
}
.header .link
{
white-space: nowrap;
width: 1px;
}
I set the header to be displayed as a table, and gave it full width. I made all of the child divs act like a table cell. I made the links minimum width (1px) and said not to wrap whitespace. With regular divs, that would overflow. With table cells, that means it tries to be 1px wide but will expand to fit its content.
The rest of a table row's width will go evenly to whichever cells are left over that don't have a set width. In this case, it's the logo div. Then, as you shrink the window, it will slowly start to shrink the logo as needed.
You will need to tweak this to fit your design better. If you don't want your nav pushed all the way to the right like it is in the jsfiddle, you might need a "buffer" div to the far right, or different width settings, or a set max-width on the header div.
In my semi-fluid forums layout, I'm experiencing a strange problem where images in posts sometimes stretch the page, but sometimes they don't.
I've set the images to "max-width: 98%", expecting this to scale them down to the width of the parent element. However, this only happens sometimes; for some reason, on other occasions the images explode the layout, and I cannot tell why.
Example of a stretching page
Example of a non-stretching page
From what I can see, both pages contain huge images, but only one of them stretches the layout, while the other scales correctly.
The elements are structured using this HTML code (example):
<div class="post">
<div class="postbody">
<div class="content">
<img src="<source>" class="postimage" alt="Image">
</div>
</div>
</div>
while following the below CSS rules:
.post {
padding: 0.5rem 0.5rem 0.5rem 1rem;
margin-bottom: 1.6rem;
position: relative;
}
.postbody {
padding: 0px 0px 3rem;
width: 83%;
float: right;
}
.postbody .content {
font-family: Verdana,Arial,Helvetica,sans-serif;
overflow-x: auto;
}
.postbody img.postimage {
width: auto;
max-width: 98%;
}
A more precise view of the code can be seen at the above working examples.
I experience this issue on Firefox 30 and Internet Explorer 11 at 1920x1080, but not on Google Chrome. What's the deal? Maybe it has to do with my other issue?
img max-width is expressed as a percentage of the parent's element width.
The matter is that the parent elements is not contained because #tablewrap and it's 2 children are implementing a display:table layout strategy.
In order to avoid this problem and maintain your layout responsive I'd suggest you to remove those display:table declarations and pick up -as an example- one of the patterns explained here
Your non stretching images are acting that way because they are wrapped under different css tag with class postimage. However the stretched one's are wrapped inside different css class of bbcode_sshot.
Here's what your two images look like:
Stretched:
<img class="postimage" src="/image file" alt=":)" title="image title" />
Unstretched
<span class="bbcode_sshot"><img src="http://i62.tinypic.com/2dtr90k.png"/></span>
To fix stretching in non stretched images remove the bbcode_sshot class and add the postimage class or else add both as class for the overstretching images.
BTW if you wish to scale images then use this simple technique
img {
max-width: 100%;
height: auto;
}