This is a really weird bug. When I load my website in google chrome the first time I view it the images are squished but after I refresh the page it becomes unsquished. This will only happen the first time loading the page.
http://dotacommentaries.com
please load it in google chrome and tell me why the bars are squished.
How do I make these bars unsquished?
http://imageshack.us/f/24/squishedbars.jpg/
I think the 100% width value for the images is screwing it up somehow. Try either removing the width value from this css rule:
a.auserbars img {
line-height: 0;
text-decoration: none;
width: 100%;
}
or explicitly set it to match the images (310x37).
Related
I'm working on my website, and have the main body div set to a certain width. But when I upload all my files to the web host the size of width shrinks, and no matter how I adjust the code for the div the width size stays the same(wrong size) on my published site, despite looking right when I just open the code in a browser.
I've tried Editing the code directly in the web host to see if I can even adjust the width at all. I've already tried deleting and re-uploading everything a few times.
Here's what I have on my CSS style sheet:
.body1{
max-width: 1200px;
height: 1000px;
background-color: #fffdf8;
margin: auto;
padding: 10px;
text-align: center;
border: 2px solid #f892c9;
}
<div class="body1" style="height: auto">
The width of 1200px is how big I want it to be, and it appears correctly when I open the html file in a browser. When I upload the code with a webhost the width is smaller, and even if I change it to a bigger number like 1500px it stays the small size.
EDIT: I'm publishing it with 000webhost.com. As far as I can tell there's no other CSS, only what I've uploaded for my page.
Maybe you want the atributte "width" instead of "max-width"?
max-width its usefull when you want to resize the page with a specific width.
Check the Reference CSS anyway: https://www.w3schools.com/cssref/pr_dim_width.asp
I still don't know why exactly it wouldn't work in the first place, but I finnaly decided to just cut it out of the CSS style sheet and put it with the rest of my html the old fashioned way:
Now it works.
I have a few charts on a page, each in its own bordered box. All charts on first page load exceed the width of their parent.
If I resize the page width slightly, it all goes back to how it should be. The strange thing is this is showing up only on latest Chrome version. Safari an FF are working well.
Another strange issue is that if I empty cache and hard reload in Chrome, it loads OK. Refresh the page, and the charts bleed to the right of their container.
I have tried this CSS from research:
.highcharts-container {
width:100% !important;
height:100% !important;
}
But this screws up the tooltip on Chrome and other browsers too.
Any sugegstions welcome.
in addition to your rest of css apply max-width: 100%; to your div like below
.highcharts-container {
max-width:100%;
}
I'm trying to make my wordpress site always display with 100% width. My wordpress-css has no mobile specific css. When I visit the site on mobile, the site is not longer 100% width, despite the css saying that it should be. I'm currently testing stuff in the css and therefore not linking the site.
EDIT: I now tried removing all width-specifications in the entire css, the word "width" is not present anywhere in the css. The html still locks to exactly 320 pixels, same as the width specified by the iPhone4. This could be an issue with wordpress and not the css file.
The really weird thing is that if I scale up the window, and then scale it back down, it looks like it should look:
This is the css:
body, html {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 0;
color: #333;
min-width: 100%;
margin: auto;
}
I have the viewport-thing at the top of my html:
<meta name="viewport" content="width=device-width">
However I have not been able to add the "initial-scale=1" into the wordpress html. From what I read I doubt that this is the problem though.
Any suggestions what could be wrong? As a sidenote: It does fail to display 100% width on an actual mobile device as well, it's not just the chrome device simulator failing.
A hint could be that it seems that even wordpress itself misjudges the width of the screen, as can be seen by the wordpress header not filling up 100%
By request of rsn, I will sum up our discussion as an answer. Creds to rsn and everyone else for finding the issue!
In this case, the width itself is set properly. The problem is that things move outside the 100% width and the site tries to scale everything down to fit the stuff moving outside of 100% width. This caused everything else to scale down, including the font size of the text which I thought was an entirely different problem. So, after specifying:
.img {
max-width: 100%;
}
The site worked fine. Except for one last detail, I also has a really long link that, despite having word-wrap: break-word, ended up being wider than the width. To solve this I added:
.long-link {
word-break: break-all;
}
And now nothing moves outside the 100% width, and everything works as it should.
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..
Basic Scenario:
I have an image that is 2048x1536.
I have an html file that displays this image via CSS that specifies a width of 1024 and height of 768.
I have an UIWebView that displays that html page.
Problem:
On an iOS6 device, that image is resized to fit within that 1024x768 area. On an iOS7 device, that image is cropped to only display the top left quarter of the image.
Since iOS7, Chrome, and Safari all do the cropping option, I do believe that is the correct behavior (I strongly suspect that the latest webkit was updated to match this standard behavior). However, for business reasons, I still need the resize behavior.
Question:
Is it possible to still to keep that resize behavior even on iOS7?
EDIT - Additional info based on comments:
I presented a highly simplified scenario. I can't just put the image into an image view. The feature within my app allows 3rd parties to load their HTML content into it. Also, related to that, I can NOT modify the HTML contents. Basically, all I can do is create a NSUrlRequest for that HTML content and tell the UIWebView to load it via loadRequest.
Below are the HTML snippet and CSS snippet. But please keep in mind that I can't change this. I only control the objective-c end of things.
<body >
<div id="wrapper">
</div>
</body>
#wrapper {
background-color: #FFF;
position: relative;
width: 1024px;
height: 768px;
background: #FFF url(images/bg.jpg) no-repeat top left;
background-size: contain;
overflow: hidden;}