I'm want to put a picture inside a div, with a specified width an height. However the image is still bigger than the div size:
<div class="Designs">
<p>Designs</p>
<div class="Thumbnails" data-animation="animated pulse">
<img src="images/Halloween/bat_sm.png" width="130" height="76"/>
</div>
</div> <!-- End Designs -->
<style>
#content .Designs .Thumbnails img {
margin: .3em 0;
min-width: 0;
}
#content .Designs .Thumbnails {
width: 143px;
height: 95px;
margin: auto;
}
</style>
My website for reference: http://mast.salemstate.edu/itc18244/Portfolio/
You have there min-width: 246px in your styles.css in line 44.
You can overwrite that using:
.Thumbnails img {min-width: 0;}
Or better, set min-width to images where you need that, not to all images (you more specific selector than img).
On line 44 of your styles.css file you have:
img {
min-width: 246px;
float: left;
margin-right: 2em;
margin-top: 6px;
margin-left: 1em;
}
The min-width: 246px; rule is taking precedence. You either need to remove that rule, or override it.
Replace these in your CSS code:-
img {
min-width: 246px;
float: left;
margin-right: 2em;
margin-top: 6px;
margin-left: 1em;
}
With:-
img {
min-width: 0px;
float: left;
margin-right: 2em;
margin-top: 6px;
margin-left: 1em;
}
Related
I have a image on my webpage and I don't understand why the padding is only setting on the left side.
The right side doesn't show any margin.
This is my CSS:
#main {
margin-top: 0px;
margin-bottom: 10px;
}
#main {
margin-top: 100px;
margin-bottom: 100px;
}
#media (min-width: 768px) .noo-container {
max-width: 750px;
width: 100%;
}
.noo-container {
margin-right: auto;
margin-left: auto;
width: 100%;
padding-left: 15px;
padding-right: 15px;
}
article,
aside,
details,
figcapti figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
display: block;
}
* {
font-family: "helvetica", "arial", "sans-serif";
}
I'm expected to have the same margin on the left and the right.
The page is https://prueba.soygorrion.com.ar/home/.
This is caused by using the "background-image" property on a div. It is significantly easier and more common to use the tag.
<div class="tp-bgimg defaultimg">
<img src="https://prueba.soygorrion.com.ar/wp-content/uploads/2019/05/HEAD1-1024x532.jpg">
</div>
.bgimg {
width: 100%;
height: 100%;
opacity: 1;
visibility: inherit;
z-index: 20;
}
.bgimg img {
margin: 0 10px;
width: calc(100% - 21px);
}
If you inspect the element the <div> with class="vc_row wpb_row vc_row-fluid vc_row-no-padding" has left: -88.5px;width: 1349px. Thats causing the issue here.Make it as left: 0;width: 100%. Next remove this class="site-main noo-container" from the <main> as you have mentioned max-width
<div data-vc-full-width="true" data-vc-full-width-init="true" data-vc-stretch-content="true" class="vc_row wpb_row vc_row-fluid vc_row-no-padding" style="position: relative;/* left: -88.5px; */box-sizing: border-box;width: 100%;">
The CSS contains a lot of conflicting data:
Both of these are called using id="main", so, which is it supposed to be?
#main {
margin-top: 0px;
margin-bottom: 10px;
}
#main {
margin-top: 100px;
margin-bottom: 100px;
}
Then here, you indicate that a width: 100%; which conflicts with your margin-right:auto; and margin-left:auto; settings. And... while you indicated settings for padding-left:15px/padding-right:15px, you may be better off using padding: auto; which would actually center the content from all 4 directions.
#media (min-width: 768px) .noo-container {
max-width: 750px;
width: 100%;
}
.noo-container {
margin-right: auto;
margin-left: auto;
width: 100%;
padding-left: 15px;
padding-right: 15px;
}
You can't set class and id second time. In the fact, you can, but it's nonsense, it orverrides.
I am a stuck on trying to change the size and location on social media links on a test web page. No matter what size I change the height and width to in the CSS the image remains super large.
#footer {
height: 40px;
background-color: #69D2E7;
clear:both;
font-family:Open Sans;
}
#footer a {
display: inline-block;
margin-right: 5px;
}
#footer img a {
width: auto;
height: 10px;
max-height: 10px;
}
<div id=“footer”><img src="facebook.png"></div>
<div id=“footer”> <img src="pinterest.png"></div>
<div id=“footer”> <img src="instagram.png"></div>
<div id=“footer”><img src="linkedin.png"></div>
Its a matter of position, the img tag is actually inside a tag, so the one with
#footer img a{}
should be changed into
#footer a img {
width: auto;
height: 10px;
max-height: 10px;
}
Hi I have tested this code and its changing height and width of image. Please try this code: #footer a img { height: 30px; width: 35px; }
#footer a img {
width: auto;
height: 10px;
max-height: 10px;
}
To center the hyperlinks, try this:
#footer {
/* other styles */
text-align: center;
}
If that didn't work, try removing inline-block from a
#footer a {
display: inline-block; /* remove this line, if needed. */
}
I am trying to move an image. I Want it to be alligned with the title "Experience". Here is my code
html code
<header>
<h1>Experience</h1>
<div class="logo">
<img src="./img/exp.png">
</div>
</header>
and the css code
.logo{
width: 100px;
}
.logo img{
float: left;
margin-left: 0px 0px 0px 30px;
width: 150px;
height: 38px;
}
Just tweak the CSS a little:
.logo{
width: 100px;
display: inline-flex;
}
.logo img{
margin: auto 5px;
float: left;
width: 150px;
height: 38px;
}
Does this work?
This solution worked for me, but I have no idea for you as you didn't put your full code...
Try adding float:left to .logo and setting display: inline-block on your h1, like so:
*{
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, Sans-serif;
font-size: 34px
}
header{
background-image: url(../img/bar.png);
background-color: #00B9ED;
height: 75px;
border-bottom: 0px;
padding-left: auto;
padding-right: auto;
width: 100%;
}
.logo{
width: 100px;
float: left;
//display: inline-flex;
}
.logo img{
margin: auto 5px;
float: left;
width: 150px;
height: 38px;
}
h1 {
display: inline-block;
}
How about making margin-left: 0%; and margin-right. Depends where you want to move it.
You used shorthand for margin-left. We use shorthand for margin only. You did margin-left: top right bottom left instead. I don't think the program reads that correctly.
I have a main div with the class of .features, inside this div I have two boxes each one with a height set to 160px and different widths. There's a myterious padding between the end of the two boxes and the main div as seen in the screenshot below:
The padding is about 5px - I would like to remove this padding if possible. I tried adding margin: 0; and padding: 0; to the main div as well as to the two inner boxes but it didn't work.
Here is the html for this section of the page:
<div class="features">
<div class="list-items"></div>
<div class="screenshot-box"></div>
</div>
The css:
.features {
width: 980px;
margin: auto;
margin-top: 25px;
background-color: lightblue;
}
.list-items {
width: 280px;
height: 160px;
display: inline-block;
background-color: red;
}
.screenshot-box {
width: 583px;
height: 160px;
float: right;
padding-bottom: 0;
display: inline-block;
background-color: red;
}
This actually has nothing to do with padding or margin. If we look at the computed style example, we'll see that the height of the element itself is 164px:
This is happening because your inner elements are set to display as inline-block. This means they're affected by font-size, and ultimately the font-size is causing the height of the parent element to be greater than the height of the inner elements.
There are two fixes:
Specify a font-size of 0 on your .features element, and then reset this within the inner elements (by giving them a font-size of 16, or whichever your default size is).
.features {
width: 980px;
margin: auto;
margin-top: 25px;
background-color: lightblue;
font-size: 0;
}
.list-items {
width: 280px;
height: 160px;
display: inline-block;
background-color: red;
font-size: 16px;
}
.screenshot-box {
width: 583px;
height: 160px;
float: right;
padding-bottom: 0;
display: inline-block;
background-color: red;
font-size: 16px;
}
<div class="features">
<div class="list-items"></div>
<div class="screenshot-box"></div>
</div>
Give your .features element a height of 160px itself to match its children. With this the browser doesn't have to calculate what the height should be itself.
.features {
width: 980px;
margin: auto;
margin-top: 25px;
background-color: lightblue;
height: 160px;
}
.list-items {
width: 280px;
height: 160px;
display: inline-block;
background-color: red;
}
.screenshot-box {
width: 583px;
height: 160px;
float: right;
padding-bottom: 0;
display: inline-block;
background-color: red;
}
<div class="features">
<div class="list-items"></div>
<div class="screenshot-box"></div>
</div>
Just make font-size as 0 for .features, and it will take full width. Here is your fiddle.
.features {
width: 980px;
margin: auto;
margin-top: 25px;
background-color: lightblue;
font-size: 0;
/*Just make font size as 0*/
}
.list-items {
width: 280px;
height: 160px;
display: inline-block;
background-color: red;
}
.screenshot-box {
width: 583px;
height: 160px;
float: right;
padding-bottom: 0;
display: inline-block;
background-color: red;
}
<div class="features">
<div class="list-items"></div>
<div class="screenshot-box"></div>
</div>
You could also just ditch the display: inline-block on both child elements and set float: left on .list-items and display: table on .features (code example). Added benefit that without hardcoded parent div height, the parent div will expand to fit child content.
#james donnelly has already given you an accurate and concise explanation to the cause.
Below is a simple html web page that is responsive except for one div (goplay) that over lays other parts of the page when screen size is reduced, instead of dropping below the image.
Styling Sheet external
#wrapperlp {
width: 100%;
margin: auto;
}
#media screen and (max-width: 800px) {
#wrapperlp {
width: 90%;
min-width: 100px;
}
}
#headerlp {
font-size: 30px;
color: white;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
}
#para {
font-size: 20px;
color: white;
text-align: center;
}
#game_img {
height: 250px;
width: auto;
margin-bottom: -30px;
position: relative;
display: inline-block;
float: left;
margin-top:-30px;
padding-top: 5px;
max-width: 100%;
}
#goplay {
position: relative;
display: inline-block;
float: right;
margin-top:-250px;
margin-left:80px
}
#spacer {
height: 40px;
margin-left: auto;
margin-right: auto;
width: 100%;
max-width: 900px;
padding-top:20px;
}
Html which is set to call the above css
<div id="wrapperlp">
<div style="background-image: url(https://.jpg); height: 430px; width: 1000px; margin-left: auto; margin-right: auto; max-width: 100%;">
<div id="headerlp">Some Text</div>
<div id="para">More Text</div>
<div id="game_img"><a href="//www.youtube.com/" target="_blank"><br />
<img src="https://.png" height="auto"/></a></div>
</div>
</div>
<div id="goplay">----form----/div>
<div id="spacer">
<div style="position: relative; float: left">Text</div>
</div>
margin-top and left should in %. thats y its overlay becoz of px
First off, it looks like you're missing a couple of divs.
The goplay div doesn't have a closing tag, (well it's got one but not that works)
Also your bottom spacer looks like it's missing a closing tag as well. Not sure if it's supposed to wrap anything or what.
Perhaps you had some copy/paste errors?
Normally if you set a negative margin it will overwrite other divs. You should, for the most part, not have to use negative margins.