I have implemented the updated Google Sign In for Web into my website however, I am unable to style to be responsive of the browser size and screen its displayed on. I have the following code right now:
<div id="g_id_onload"
data-client_id="CLIENT_ID"
data-context="signup"
data-ux_mode="redirect"
data-login_uri="signup-with-google.php">
</div>
<div class="g_id_signin mb-6"
data-type="standard"
data-shape="pill"
data-theme="outline"
data-text="signup_with"
data-size="large"
data-logo_alignment="center"
data-width="400">
</div>
Firstly, I have tried adjusting the data-width attribute and it works fine when my website is viewed on a monitor or laptop screen. However, on a mobile screen, the button goes out of the container. I am unable to make it responsive.
I have tried styling it using css as per the other components of my website, however, it seems that the styling is forced by google and I'm unable to change it.
Also, there's this weird forced layout bug that I'm having when I refresh the page. The signin button appears bigger and then shrinks down on every page reload.
Any help would be appreciated. Thank you very much.
Related
Earlier I uses a flash file inside tag to make it center on my Wordpress Website. But now since have converted into html5 so i can serve my content to android browser users. The problem is with aligning the content to center of the page for android browser. I need the fix so that the same code works for both Desktop browser and Android Browser.
Right now if you visit the website from your mobile www.truckstopquebec.com you will see that the half content goes out of the screen. I want to make it center align. I have tried several codes like max-width:100% height 200px; but the height goes wrong with large white content.
Can anyone suggest how do i fix this. I have used google swiffy to convert swf flash file into html5.
The Code which is needed to be styled is
<div id="swiffycontainer" style="width: 800px; height: 174px"> </div>
This is unrelated to canvases. Here is a site that I think should help you center the div.
(You will learn a lot more through research than just getting the answer)
I'm trying to add share buttons for social media such as facebook, twitter, and linkedin to my website, but I'm getting some real odd results on my Android device. The way I want the buttons to be set up is side by side in one straight line. In Firefox, Chrome, and Internet Explorer, the buttons all line up the way I want them to. On my Android device however, the facebook buttons (which are divs) stack on top of one another and the first tag after them. I used code provided by facebook, twitter, and linkedin to create these buttons.
The code looks something like this:
<div id="social_links">
<div class="fb-like" otherdata></div>
<div class="fb-share-button" otherdata></div>
<a class="twitter_share_button" otherdata></a>
<a class="tiwtter_follow_button" otherdata></a>
<linkedin button>
<email button>
</div>
As I said, in desktop browsers, the links all come out in a horizontal line like I want them to but on my Android device the facebook like button stacks on top of the facebook share button and that stacks on top of the twitter share button.
Here's the CSS for the div that contains them all:
#social_links {
float: right;
margin-right: 10px;
display: block;
}
If I haven't explained well enough how I want things to look, here is how I want them to be laid out:
<div> <div> <a> <a> <button> <button>
And here is how they are coming out on Android:
<div>
<div>
<a> <a> <button> <button>
I generated the code for my buttons from https://developers.facebook.com/docs/plugins/share-button/ and https://developers.facebook.com/docs/plugins/like-button for facebook and https://about.twitter.com/resources/buttons for twitter. If anyone could help me figure out why Android is aligning things this way I would greatly appreciate it.
Set the width for each one to be as small as possible.
It appear, from your example, that the width is too big on each element and one going to mobile they get pushed down. That is the first thing I can see without really seeing the full thing
Also, I hope you close the tags , that could be also why
I have an HTML page that loads one way the first time you load it and another way the second time. This is reproducible using Chrome in private mode (because it clears the cache each time).
FIRST TIME:
SECOND (AND LATER) TIME:
I haven't seen a problem like this before, and am having trouble searching other complaints on this. Any advice on where to start investigating?
EDITS
Thanks for all the feedback. Just to clarify a few things. The CSS is standard Bootstrap 3.0 only, there is no other styling or CSS. The URL is https://www.acls.net/index-exp120.php and this is Chrome Private mode with all extensions disabled. I only see this issue in Chrome, have updated title to reflect that.
Ok - the issue depends on multiple things
only might happen with an empty cache
depends on the loading speed of font-awesome & bootsrap - if they load faster than your logo or not...
So while running Chrome in Incognito Mode and reloading again and again eventually I could reproduce the issue.
You cannot easily fix the loading race condition but fixing your css should work :
add class pull-left to your logo
clear the floated area by applying class clearfix to the page-header
Its not necessary but good choice, add width & height to your logo image so it doesn't pop in once loaded
So here it is:
<div class="page-header clearfix">
<a href="/" class="logo pull-left"">
<img src="images/logo.png" height="62" width="232" alt="">
</a>
Hope that helped.
Some main issues to look into.
Browser size.
Is it wider at one point than the other?
It's obviously within the same browser but just in case, I would test this in multiple browsers, because you do want your code to be cross compatible.
To me it looks like a width problem.
Perhaps you have a #login div, or some oddly named, at the top right that contains that content and floats it, and being that the content is not responsive, but the div itself is. When the div shrinks a little the content itself doesn't and pushes the rest of the content down.
I don't even know where to start.
On one page of my project, when you enter the page for the first time, some parts of the site disappear and some don't get styled (e.g. border-radius doesn't work).
First off, some parts of the header shows up again when you hover over links, or select some text (that is actually invisible before selecting). Everything looks as it should when you refresh the page.
Before I found out that hovering or selecting fixes some parts, I thought that styles don't get applied or something like that. I've even tried to remove all the #imports and check if that works.
This happens only in Safari, styles get applied to proper elements but those are not rendered properly and are not visible.
I don't even know which parts of my code should I post here since it's just basic CSS and it works perfectly everywhere except Safari.
Any ideas?
#edit:
Here's an example of an issue (link your profile is shown, cause I hovered over it)
And when you select some parts of the invisible text and than deselect, it shows up:
This is Bootstrap based site, and here's the code for this alert:
<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>You are not connected to Stripe yet.</strong>
<p>Other people will not be able to find or participate in your experiences until you connect to Stripe. Go to your profile to connect to Stripe now.</p>
</div>
Regarding the styles, it's basically just some padding and, obviously orange gradient. On the screenshot, you can see the border radius but sometimes it's not there.
An advice by a friend of mine: put empty style tag in your document worked! Just placed line <style></style> in the header and everything works.
Check out safari developer tools : https://developer.apple.com/technologies/safari/developer-tools.html
Posting screenshots of individual problems along with html snippets would help us narrow down the issues.
I am currently using a modified version of this theme to display an annual report:
http://www.elegantthemes.com/preview/ElegantEstate/
I can't link the report as our project manager wants to keep the site private until launch.
The project manager is complaining of a strange loading pattern where some content in the features slider shows up before the first slide for a few seconds, until the page is completely loaded. I do not have this problem myself.
Could anyone explain why this might be happening, and how I could fix it? Could I install a plugin that would pre-load the entire page or something like that?
I tried an image pre-loader plugin that did not solve the problem.
Thanks for your help.
Many sliders employ a technique where all of the content is loaded in the html, something like:
<div id="slider">
<div class="pane">
content
</div>
<div class="pane">
content
</div>
<div class="pane">
content
</div>
</div>
While the height and width of the combination of all three individual pane heights and widths, it will be larger than your slider wrapper div. For those who do not use JS, this is what they will see. This is considered to be graceful degradation, whereby they will not get the fancy slider, but they still will be able to see the content.
Once the JS loads in the page, the slider script most likely applies CSS rules that limit the size of the viewable slider area. The slider will likely get height and width parameters and an overflow declaration, something like:
width:200px;
height:200px;
overflow:hidden;
Once those rules take effect, the slider will look as it should. Until that happens, your slider will look nothing like a slider and all of the content will be viewable in a very ugly fashion.
The reason why your project manager is seeing it differently than you may be due to different connection speeds or individual browser inconsistencies. It sounds to me like your slider is working, you just want it to do something that it's not meant to do.
I think you might be able to hack this to work the way you want by adding rules similar to the ones I showed above to the containing div in your CSS style sheet.
I know you cannot post the url here, but if you can post or link to some JS, HTML, and/or CSS for the slider (or even the slider script used in this project), we might be of more help.