As you can see from the image below, the browser (both Chrome and Firefox) insists on applying width:24px / height 24px for the icon.
However, I have already changed the values on the CSS file. In fact, if you click on the file the browser says the width/height are coming from, the browser inspector itself show the updated values of width:150/height:40, as the image below shows.
So basically the inspector is contradicting itself! I can't solve this clearing the cache.
Any ideas on what is going on? Could it be related to this being a .scss file?
You can check it live here: https://www.chatbotforums.com/ . I am trying to change the size of the Facebook login icon, inside the "Welcome" box.
Your banner is overflowing. You will have to modify the CSS for the box container and then the icon.
Modify width and height style to min-width and min-height.
img {
min-width: 250px;
min-height: 250px;
}
<img src="https://www.google.ca/images/branding/product/ico/googleg_lodp.ico">
Solved it.
For some reason the browser inspector was saying that the width/height were being pulled from the _style.scss file, but that was not the case.
They were being pulled from another file, the standard style.css, so I had to tweak the values there instead.
Strangely this incorrect information appeared on inspectors of both Chrome and Firefox.
Related
My image grid on my Wordpress site for some reason does not resize fully to the max-width of the browser when I click an internal link to the homepage (eg. I click on an image then click back on the logo). It goes back to fullscreen when I resize the browser. It also works fine if I go into my website externally (from typing in the url). I have tried using:
#site {
max-width: !important;
}
but doesn't work. I'm not sure if if it is the theme that is the issue or one of my custom css. I have tried isolating some css with the inspector tool and seeing if any of them caused the problem but I couldn't find anything.
Unfortunately I don't have access to the full backend of the theme and I'm not a developer.
So if anyone has any idea that would be great!
Link is http://imconniehuang.com/
Your image gallery's width is calculated and set by Javascript. Have a look at the surrounding div.vc_row, the width is set inline there. So no point in using CSS here. Seems like the script waits for a resize event to recalculate the gallery's width.
The prefix vc_row indicates that you are using Visual Composer. I think the problem is with this plugin. I therefore recommend getting support from the plugin provider-
BTW:
max-width: !important; is not valid syntax. 'max-width' sets the maximum width of an element. You can have a look at the syntax here.
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 use Twitter Bootstrap for my website but also AD Gallery as Image Gallery (http://coffeescripter.com/code/ad-gallery/).
I have several tabs made with bootstrap on my page, the gallery is on the second tab. I found out, that there is a problem with IE 9 (it works in Firefox and Chrome) to not show the images in the gallery.
I debugged this and found out that this is due to a css command in the Bootstrap reset:
img {
height: auto;
}
If I remove this line, everything works fine also in IE9.
I don't want to remove this line completely but override it in my own CSS for this specific gallery div. The funny thing is, that "auto" is already the default value for this attribute.
So how can I reset it to "not set" as it is, if I comment out this line in Bootstrap?
Checking the IE9 default stylesheet confirms img height is not set to anything, which to me implies auto so this is strange.
Does height:inherit work? Edit: No it does not.
I've been tearing my hair out trying to figure out why my pages based on Bootstrap responsive have an extra 25-30px on the right side in Firefox and IE when the window is <600px in width. I started to remove parts of my code one by one, until I was left only with the fluid nav bar and the Facebook SDK. Once I then removed the Facebook JS SDK reference, the padding on the right side disappeared.
You can see this here:
FB JS SDK included, extra right side padding:
https://dl.dropbox.com/u/571515/chewsy/Test/FB-with.htm
If you remove the FB JS SDK, it works as expected (no padding on right side):
https://dl.dropbox.com/u/571515/chewsy/Test/FB-without.htm
Since I need the Facebook JS SDK for the like buttons on my page, how can I work around this?
Oddly, in Safari and Chrome this does not repro.
Screenshot from Firefox:
Screenshot from IE:
As suggested by CBroe, you could try to alter the #fb-root style, but there may some JS actions that will change it again, or it may just disable some functions.
So I would suggest to add this to your styles :
html { overflow-x: hidden; }
With this fix, you may encounter one slight problem if you have a very small window and want an horizontal scrollbar. You might try this, though the padding reappears under 200px :
#media (max-width: 200px) {
html { overflow-x: auto; }
}
Tested on FF13, and IE9 (can't resize IE9 window to less than 200px).
It’s the Facebook DIV element #fb-root that’s causing this – once you set it to display:none or position it absolutely with say left:-200px via Firebug, the extra margin disappears.
However, doing so in your stylesheet might not be a good idea, since the SDK uses this element to display it’s dialogs etc. – so either those might stop working (setting it to display:none is supposed to stop it working in older IEs completely), or the SDK might overwrite such formatting again itself.
You should thoroughly test this, if you try adding formatting of your own to it.
i am not able to set the height of the Div of this theme to 156px;
Its inheriting css property from some place else and making it 118px
Please the following website in Chrome and firefox you will see the difference
http://jssamch.com/
It's coming from 1-default.css, line 19.
Remove the height: 118px property.
You should really be using Firebug (for Firefox) or Developer Tools (for Chrome) to figure out this sort of issue on your own.