The logo in the header loads and then disappears on the mobile view. Reloading the page causes it to appear and then disappear. This only happens when using a phone, and I can't seem to replicate this behavior on a desktop screen. I'm trying to track down what may be causing this behavior?
http://www.georgefoxconference.com
There are a couple of css rules that apply only on a certain viewport width through media-queries (in style.css).
But no matter how you change your external css, the actual img-tag div.navbar-brand > a > img has set an inline-style attribute display: none; which, on a wider viewport is set to display: inline;. It changes on small viewports after the pageload finished.
I assume the img's style attribute is changed via javascript.
You can reproduce this behaviour with chrome's mobile emulation using a screen-resolution of 375x812 (e.g. iPhone X).
Related
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.
I'm currently working on a html email for various clients, and having some strange issues using gmail (yay) - specifically, when viewing an email through the browser. (No issues in the app)
The issue only really comes about when using the browser on a small screen (eg mobile) - all the images are displaying too wide, despite a max-width, meaning the layout is stretched and requires horizontal scrolling. Whilst it causes no issues on desktop, the same thing happens to the code
On my images, I've set
style="max-width:100% !important;"
inline on each image. I also have a <style> block in the head with
img {max-width: 100% !important;}
When inspecting the image element (both on my phone and pc), I'm seeing no sign of the max-width from the head, which is not totally unexpected.
What's weird is that each image still has a max-width set inline- BUT it is no longer in %, but in px.
Inspected in the pc browser, the inline max-width now says
max-width: 1920px;
Viewed on my phone (android, inline max-width is
max-width: 767px;
In this case, the image is now WAY too wide and is breaking the layout. The same thing happens on all images, regardless of their actual size.
I'm not seeing any message telling me that the email has been adapted for my screen, or any option to turn this on or off.
Has anyone had this happen before? Any ideas on how to prevent gmail messing with the max-width, or getting it to respect the max-width in the head? (I've avoided using classes or id's to attach styles from the head as as far as I know, google strips these out)
Even weirder (or maybe I'm losing it...) I'm SURE this was working yesterday...
UPDATE: think I've solved why it was apparently working yesterday - it wasn't - changes I'd made in dev tools weren't clearing when I reloaded, so the max-width I'd added in as a test (replicating a max-width in the head) was still there...
After a bit more playing, adding width: 100% !important; inline on all wide images seems to work as a fix - gmail doesn't mess with the value. Would still be interesting to know why it changes the value of the max-width though, if anyone has any clues!
Gmail is notorious for misusing its maxwidths for set layouts.
try and avoid setting max-width to a percentage value for elements that aren't high level containers. you will run into weird rendering on things like gmail app as well. typically gmail app converts all widths into max-widths so it can crunch your content but still maintain the structure at higher screen resolutions.
gmail webapp does something similar. it restricts the widths you can set an element to so you can't add things that are wider than your display, at which the gmail web app is displaying at 100%.
gmail mobile app - forces your content into a 320px/480px wide box
gmail desktop app - forces your content to never exceed your screen res
Gmail desktop treats styles in the head quite strange anyway, it completely ignores most classes/id's (don't listen to people that say it strips them completely) if you use other tags as identifiers other than #id and .class it will apply those styles. e.g.
* [lang~="identifier"]
lang is pretty much the only tag that you can use that wont get in the way of tags that are being used, i.e. Alt, Title and Href.
Just be careful, if you are using media queries or anything that starts with "#" in the style tag gmail may potentially (depends on how its feeling that day) completely remove that style tag. You can avoid this by adding those styles in a style tag in the body though.
in conclusion. Don't rely on max-width to control your layout from inside out, set pixel values to limit width="100%".
Hope this helps
I have a slideshow on my homepage that scales to 100% width. It works perfectly on my computer (I can even resize my browser windows all the way down, in both Firefox and Safari, and it works great) but it doesn't work on my iphone (it stays too wide and adds a lot of blank space to the right of the page content).
The slideshow is an iframe. I've tried scaling the iframe with html, putting it in a div and scaling the div with css, and I've tried this: http://css-tricks.com/snippets/html/responsive-meta-tag/, but nothing seems to be working. Does anyone have any ideas I can try?
Thanks!!
website: www.silvervinedesign.com
You have pixel widths defined for the styles of this element. Therefore, it won't be responsive.
If you inspect the source of this iframe (right click and choose "Inspect Element"), you'll find that the <ul> element containing the images is getting a style="width: 4778px;" applied to it. Each <li> child is also getting an explicit pixel width style applied. When I view the source of the iframe, these style tags are not present there.
That tells me you've got some javascript function which is setting this width. Looking at your source, I'm guessing the plugin responsible is galleria, but it's hard to tell.
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'm building a test mobile website for a client: http://preview.stafforce.co.uk/mobile/
As you can see, upon the loading the website on a mobile device or on the desktop using the correct viewport size you will see a red box with three options. The red box is the page itself told be red by a class of splash. (I had originally had this as a separate DIV that sat ontop of the page using position fixed, but that had several issues with positioning).
On the desktop this works fine, but on the mobile device e.g. iPhone using Safari when the toolbar disappears and/or you scroll/change orientation you get a black bar, this is because the body is appearing as the div is not taking up the full size of the screen (jq mobile uses min-height which is done using the framework to make this happen).
Any ideas on how to fix this? Or had similar issues? Also noticed when doing the transitions that they appear cut off in places again likely attributed to this min-height not getting things correct.
Example:
Edit: The reason I have changed the body to black is because when you do the flip transitions, this is what you see behind, and black is the correct colour for the background when doing transitions on phones such as the iPhone.
You should use Jquery mobile enhanced 'listview' and keep your content in DIV with data-role='content'.
Jquery mobile will make your content fullscreen.
You should not style listview or anything else manually.
Here is the demo: http://jsfiddle.net/nachiket/YSp3x/
I haven't set icons and your logo, but you will get idea.
If possible use Jquery mobile Theme Roller for base styling, and do customizations on top of it.
EDIT:
You can set color on div which has data-role="page".
Like:
.myPage {
background-color:#ff0000;
background-image:none;
}
And in HTML
<div data-role="page" class="myPage">
I have already updated jsfiddle link.