I am doing my first website and decided to use Bootstrap3. I've started to work over section with four 'feature' columns with one image per one of them. I am including link to my developer version of it:
http://tymekpudlik.github.io/kajtek/
In Chrome/Safari there is a problem that four image-icons (section where is a brain image) have much bigger height that they should have when we launch the site for the first time. When I open Chrome DevTools and click on css height property for image and enter one more time same, percentage value (90%), images are changing to correct size. Issue persists only for Chrome/Safari.
There is nothing special in css properties for image:
img {
display: block;
margin-left: auto;
margin-right: auto;
height: 90%;
width: 90%;
}
I'll really appreciate any help. Thanks!
Change stye of the parent element of that img (i.e div with class "feature text-center") as
height:auto; instead of height:100%;
This trick may help you..
Related
Can someone give me a clue about this weird behaviour?
When the browser is wide, we have a hint on the right side of a form
field. This is Ok.
When we narrow the viewport the hint gets to the bottom as it
should.
When we try to re-scale the viewport to be wide again, the hint text
overlaps other elements, instead of going to it's original position
as intended.
Chrome V.46 on Mac OS 10.
Step 1 - The browser is wide open - Hint text is on the right side
Step 2 - If we narrow the viewport, the hint moves to bottom. OK.
Step 3 - When we try to resize the browser window, the hint doesn't follow is position:
Step 4 - This is how the inspector looks like when the hint ignores the input field position:
Step 5 - I then uncheck the "position absolute" on the inspector window, and it stays like this:
Step 6 - Finally, I check that same checkbox, and it goes to the appropriate position.
As anyone had a similar issue before?
I've tried to reproduce this on a Fiddle, using the same rules, not just the exact same elements for obvious reasons, but it seems to work there:
https://jsfiddle.net/5m04na1u/1/
<div>Lets imagine I'm a form element wrapper</div>
<p class="hint-block">I'm a hint text block</p>
div {
position: relative;
width: 100px;
}
.hint-block {
display: block;
color: blue;
}
#media screen and (min-width : 56.25em) {
.hint-block {
position: absolute;
display: inline-block;
color: red;
}
}
Again, this is a Chrome only issue. Tried on other browsers and it worked well. But 99% of the time is my fault so, and even if it's not, I still have to fix this somehow.
Any clue or suggestion?
Update:
Here's a live code sample:
Sorry. I had to remove the link, because the product is not yet live, and the client had is concerns expressed.
My suggestion is:
Remove position: absolute from help block
Add vertical-align: middle to help block
Work like a charm for me
Adding
left: 400px to #media screen and (min-width: 56.25em) #checkoutform-email+.hint-block solves the layout issue, but not the root of the problem.
I believe this should be considered a browser issue. Since it calculates the initial left of the absolute element considering the width of its siblings.. After re-sizing the window, a layout happens and it won't consider the siblings width again, overlapping the inner contents..
You don't need the position absolute. Remove it and it works automatically.
What about making a div, where you can put your input? i think it should work
I'm currently working on a website. I noticed some elements are beeing cut off, if viewed in Firefox. I attached an Image, showing the problem.
The image below is a jsfiddle Screenshot from Firefox.
The code reproducing it is located here: JSFIDDLE
It's just an image, with an percantage value set with CSS.
.image-percent {
width: 30%;
}
The weird thing is, sometimes I am able to reproduce the bug and sometimes it simply vanishes after adding random HTML-Elements or other CSS-Properties.
Anyone already experiences this behaviour or know a workaround, forcing Firefox to resize the image the right way?
Actually found the solution in this thread Firefox blurs an image when scaled through external CSS or inline style.
Firefox implemented non-standart css property image-rendering https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
Playing with different values this solution gives more or less appropriate result:
image-rendering:optimizeQuality;
http://jsfiddle.net/jGKkB/
You need to add the max-width property. this should fix it.
.image-percent {
width: 30%;
max-width: 100%;
}
Just for testing. try this:
.image-percent {
max-width: 100%;
height: auto;
width: auto;
}
Hope that's it.
Basically, your image resolution is very high and you are trying to display it in 30% width.
So your image's pixels is not showing properly. Whenever you show the large image to small or small image to large this will be happened.
You can create an another image with desired width.
Hi here my problem and sorry in advance for the bad english it is not my native langagues.I'm doing a VB.net application and right now I'm doing a banner that goes on top. What i want is that she can resize automaticly for example if the customer minimize a bit the windows or narrow it. I want the image to goes smaller. Right now I've played with the width but it didn't seems to have done anything. It work for table but not for images.
Here the code for the Images:
.style2 {
width:auto;
}
I have accomplished it before using something like this:
.style2 {
width: 100%;
height: auto;
max-height: 400px;
}
(Change the value of 'max-height' to fit your image.)
This may have to be altered depending on your layout, and you may need to set certain restrictions on parent elements, but this works for me.
I have the following issue:
I am making this website... I'm using html and CSS. I've been trying to maintain CSS as standard as possible and checking as I go with the three main browsers: chrome, firefox, and ie. In MY pc it seems to be working fine (with the exception of minor details). However, when other people open it in other screen dimensions , things fall out of place. Does anyone know why this might be happening? take a look at what i'm talking about this is the homepage:
www.britobmarketing.com/ledtogo/index.html
I bet it will be a little unaligned in some of your computers, but in mine it looks perfect. It's stressful!!!
Also, as I was saying, I'm trying to keep the CSS standard so that every browser can view it the same. But browsers like Firefox and ie do not recognize the "round edges" effect on the three buttons I have besides the video. It does work on the rest though, which is what confuses me! Anyone has any idea why this might be happening?
Thank you very much for your time and help!!
This is not an issue of browser rendering engines doing things different.
You aren't taking into account a variable width of the viewport. Your header and footer are centered, and your content is fixed left. So as the viewport gets wider, the header footer stay and the center and slides left.
So for your content, here's the problem:
#indexcontainter {
width: 980px;
height: 390px;
float: none;
margin-left: 170px;
}
In your header, margin: auto is what does the centering, making the left and right margin automatically equal each other. But for the content, you hard code a left margin at 170px.
Change that to use automargins and it starts to work great:
#indexcontainter {
width: 980px;
height: 390px;
float: none;
margin: auto;
}
I'm making a small website and I'm very new to CSS but whenever I change the size of the webpage I'm working on nothing stays relative to the size of the screen it's being displayed on. For example, I have text on the right, if I increase my browser size by maximising the text on the right stays in place and is now in the centre of the browser.
One of my images is moving with the webpage size being increased and decreased by dragging the corner of the browser. I use the same CSS code for that image on my hyperlinks list, text box or text in general and it doesn't work at all.
I've researched high and low, I've found some stuff on it but nothing seems to work. I'm getting so frustrated, my site is also local so I cannot even share the link. If anyone doesn't understand what I mean I'll try re-explain it's just quite hard to explain the issue.
Code that works for the image:
img {
padding-top:50px;
display: block;
margin-left: auto;
margin-right: auto;
}
Also, I want to move the hyperlinks to the top left, not have them auto assigned if that makes a difference and I cannot touch the HTML code either, just the CSS. (I'm doing a CSS test to see if I'm able to replicate an image of a webpage already done. I'm not doing this as part of coursework or a test at college/uni, I'm a student but I'm on work placement as a software engineer, this is part time homework for me to self-learn).
you can use the percent notation
for example :
img {
padding-top:50px;
display: block;
margin-left: 10%;
}