I recently develop a site and I noticed that when I use the scroll zoom(ctrl+mouse wheel) on other sites it works great but on mine it has a strange behavior with not all of the components scaling as they should.
On the css file I used only percentages in order to keep resolutions/size problem to minimum...but I don't know if that has anything to do with the present problem.
you have the width 100% on the css of the classes (for example images). This is your problem. Use width:auto; and will resize them too
Related
I just migrated a WordPress site from my localhost to the Rackspace cloud hosting. This is my first time working with Rackspace. For some reason, the page-width on the new site is a little over 200px larger. So all of the layout is thrown off, since it was styled for a page that was scaling smaller. I'm looking for a way to either resolve this discrepancy, or at least fix the styling without having to re-size every rule that applied to width. I am also using Bootstrap in the project. I have tried various things to get the page to adapt to the new view, such as various settings for max-width, but nothing so far has had any affect. Thanks in advance for any suggestions. I really appreciate it.
Since you're using bootstrap you can simply add
class="img-responsive"
to your tags. this will allow your images to scale down. Now in order to get your images to scale up (larger) you'll want to add a css class like this.
.parent-class img {
width:100%;
}
Here is a working example. Try resizing your browser window.
I am working on a web application that allows me to insert some custom css for the front page.
I want to have a full screen background image at the start page. I understand that I can use background-size:cover which is supported in all latest version of browsers.
body {
background-image:url(/File/Publisher/Start/startpage_background.jpg);
background-repeat:no-repeat;
background-size:cover;
}
This works for latest version of Firefox and Chrome. However, it is not working in IE11. The background image does not shrink to cover the entire screen. It displays at its original size and is partially cropped off.
Using F12 to debug, I discover that if I disable either margin-top or margin-bottom (see screenshot), background-size property will work.
I do not want to modify the margin property introduced by the original CSS of the web application. Any way to resolve this problem?
I came across this as well and found that giving body any height makes the cover property have effect as long as it's not set as a percentage. For good order, min-height: 100vh should do :
http://codepen.io/anon/pen/oXmzLL?editors=010
Pretty odd since there's no issue on any other browser but that's IE for ya. Of course it's only present if the content doesn't exceed the window size (edit - it should also not have positioning that takes it out of the document flow).
Not the quickest answer by the way but it's the only topic I came across on this subject (that wasn't about legacy browser support)...
i have a standard rails 4/heroku setup. One thing is weird: The different elements of the page appear in different sizes for the local environment and for the production environment.
For example: Although the header-height is set to a specific pixel value it is different in height for the two environments.
Same with the width of the content: I set a max-width of 1260px - the width of the content is different for the two environments.
Everything appears bigger in production.
I found one related question, suggesting that the problem is due to assets which are compiled twice. Thats not the problem in my case...My CSS is loading differently between development and production environments
Whats the reason for this behaviour? Thanks in advance.
Ok, i solved it now. Its embarrassing, but maybe it helps someone else: I activated the browser zoom for localhost unintentionally. The reason why i didn't come up with this from the beginning was, that also search boxes and other elements appeared in a different style - even without any styles! Search boxes without browser zoom have rounded corners in chrome. With browser zoom of -1, search boxes appear rectangular. This is why i thought there are still styles applied, even i disabled all my stylesheets facepalm.
Maybe someone else can save some time with this hint.
My background image is supposed to stay in it's fixed dimensions and it does, when I'm working in dreamweaver or opening it from my desktop via various browsers (mozilla, ie, chrome). But once it's uploaded the background image stretches. Does someone know a solution for this issue?
Website
Try setting this in your CSS...
body {
background:url(YOUR_IMAGE);
background-size:80px 60px;
background-repeat:no-repeat;
}
Where the size in pixels is the same as the original image dimensions.
body {
background:url(YOUR_IMAGE);
background-repeat:no-repeat;
}
Try this
This could just simply be a caching issue. If you've uploaded everything. Reload the page. When its fully loaded press ctrl + r &/or ctrl + F5. I tend to hit both alternatingly several times. This should clear the image and css from your cache.
If this doesn't work then their is something weird going on.
Its also worth noting that things like Dreamweaver will load the content as if it were a browser. Therefore something can look great in Dreamweaver but not respond as expected in a browser. Likewise (with Visual Studio) things can often look terribly broken in your software but great in a browser.
You should also consider developing with FireFox and installing the Firebug add-on. This is an invaluable tool that lets you check &/or edit css etc on the fly.
Using that on your site show you have your background image set to 100% & 770px. These two rules clash with each other. The first is saying make the image 100% of the screen width whilst the other is saying make the background just 770px.
You need to consider your options better here.
I'm having a little problem with the auto-resizing feature!
I've already proficiently triple-checked (with the search-tool) that all my width-settings are set to %. There's nothing with a fixed width in the whole website. (Well, in fact yes, but nothing bigger than 100px, and in such case, not more than one per row).
But still, if I reisize the browser's windows by less than 420px width, the width of my body (html-body, of course :P) will stop by 420px and the well-known h-scrollbar appears.
Any ideas? Is there some sort of default-minimun-width? I've tried by setting a smaller body's min-width but with no results.
Just in case that's somehow helpful: the website is composed of an index (in html), two sets of three jQuery-script and one CSS files, which are alternatively wrote to the project when the site loads (one for desktop-browsers, one for mobile). I've already tried building the sites separatedly, with no better results.
I think I resloved problem with Firefox. I think FF allows to shrink website to minimal width which need toolbar with website address, searcher, bookmarks and so on. I was testing on CSS tricks which is great site if comes to mobiles :)
At the first screen at 280px width toolbar stops shrinking as the website. Sometimes I have there also Firebug icon or Fireftp icon which makes my sites stop shrinking earlier.
But right click on toolbar and unchecked Toolbar menu. Menu should hide and site still shrinking on resize. Here is Firefox and Chrome and as you can see they are quite similar as comes to minimal width.
If anyone will notice that this soultion is wrong and didn't work, please give me a feedback :)