Edit Google Recaptcha CSS to make it responsive - javascript

So I have this chunk of html that displays the inserted Recaptcha div wrapped with my own comment_recaptcha div:
<script src='https://www.google.com/recaptcha/api.js' async defer></script> <div class='comment_recaptcha' id='comment_recaptcha'><div class='g-recaptcha' data-sitekey='".$this->recaptcha_public_key."'></div></div>
Problem is, it looks horrible on mobile -
In the picture above it could look worse, but it's not ideal at all and even that recatpcha centering I've solved by making comment_recaptcha display: grid and making the g-recaptcha class margin: auto.
comment_recaptcha's father div is #insert_element -
#insert_comment {
margin-top: 10px;
font-family: 'Roboto', sans-serif;
color: #424242;
font-size: 14px;
background-color: #f7f7f7;
border-radius: 3px;
border: 1px solid #eaeaea;
padding: 10px 20px;
max-width: 100%;
}
But the true horror is when the window's width is less than about 365 pixels it could like that -
How do I fix that so the Recaptcha fits the full width of its container instead of staying at the same size and look like it?

Related

Hide text completely if it overflows with css

I would like to hide text completely if it overflows.
overflow: hidden won't work for me here, because it will cut off the text.
I would like to use something that "detects" if the text is cut off, and if so it should be removed or not displayed. In this case only one word (or if you want so the word that would get cut).
A pure CSS solution if this is possible would be great. If there is no other way, JS would also be kind of ok.
For my example see the following images. The arrow is inserted by a pseudo class ::before
How it looks when it's fully displayed
How it looks like now when it overflows
What I want it to look like when it overflows
.somediv {
width: 100%;
}
.somediv_2 {
width: 20px;
}
.someanchor {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
background-clip: padding-box;
border-radius: 0;
background: transparent;
font-weight: 500;
color: #000;
box-shadow: inset 0 0 0 1px #000;
line-height: 1.75rem;
padding: .125rem .625rem .125rem .625rem;
display: inline-block;
}
.someanchor::before {
font-family: "Font Awesome 5 Free";
content: "\f0d7";
width: 100%;
height: 100%;
}
<div class="somediv">
<a class="someanchor">
Info
</a>
</div>
<div class="somediv_2">
<a class="someanchor">
Info
</a>
</div>
I made the second button smaller to simulate it. In my case it gets smaller by resizing the viewport, because it's pushed by other elements in a table.

Apply styling only on the text inside a DIV

I'm having a div in HTML which is dynamically creating from the server side. I want to apply css in HTML(front-end) only on that div if and only if its having some-content. If it doesn't have any content then I have no need to apply the new styling.
The sample of HTML code is:
<div class="attr-marker">
Some-text-content <!-- Apply New Styling on it -->
</div>
<div class="attr-marker">
<!-- No need of new styling -->
</div>
<div class="attr-marker">
<!-- No need of new styling -->
<i class="fas fa-car" style="color:#d42424;font-size:px"></i>
</div>
And the CSS which I tried but failed is:
.attr-marker text {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
}
I can achieve it by using javascript but I want purely CSS solution so it'll help me to minimize the code.
You can set default style for empty div by using :empty pseudo selector. And then for regular div, just set the style as given above.
Or you can use :not(:empty) Pseudo Selector to set the style for the div that is not empty.
Here's an example:
.attr-marker:not(:empty) {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
}
Let me know in case you have any questions.
Regards,
AJ
You can use the :empty pseudo-class. However your server will need to output the .attr-marker div with no whitespace.
Like...
<div class="attr-marker"></div>
not
<div class="attr-marker">
</div>
And then the css would be,
.attr-marker:empty {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
}
Additional reading, https://developer.mozilla.org/en-US/docs/Web/CSS/:empty
Writing .attr-marker text { } means you want to access child elements with tag text of class attr-maker. No such tag exists in HTML.
There are specific CSS text and CSS font properties which work only on text. They are to be used in the text's parent element (in your case div with class name attr-marker):
.attr-marker {
/* text properties */
/* some other properties */
}
Properties like display: block;, width: 12px;, height: 12px; and so on, won't work on text.
That being said, you don't need to worry whether your CSS properties will be applied to the text or to the whole div. If you're using the right properties, you can be sure they are only applied to the text.
As for the content(text) presence, you don't need to worry about it. If there is no text, CSS won't change anything.
Either add another class to that div from the server side if it will send content or wrap content with another element and give it some styling.
Edit:
If you know exact position of your element then you can select it with nth-child pseudo-class:
.attr-marker:nth-child(1):not(:empty) {
border: 1px solid #333;
background-color: yellow;
}
If these markers are block rendered elements, the browser should not display them, unless they have content, therefore you can trust the browser to not render the elements with no content, use the max-width and max-height properties below:
.attr-marker {
display: block;
max-width: 12px;
max-height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
/*If required*/
overflow:hidden
}

How to remove this image border?

Button
This is the Image I want to add, but when I display it on the website it becomes a image with borders: Button with border (there is a background behind the button). I'm using javascript with reactjs, html and css.
Here is the code I used to display the image:
css code: code
js code: enter image description here
How do I display this image without this border? I tried putting in css file border:0; margin: 0; padding: 0; border: none; but nothing works
Try border-style: none;.
Your question isn't very concise, but it should work.. I think.. You should probably add in some more details
But really, I would never use an image in place of a button. Do this instead:
button {
height: 50px;
width: 200px;
padding: 5px 10px 5px 10px;
background-color: white;
font-size: 30px;
border: 2px solid black;
border-radius: 40px;
}
<button onclick="">Contato</button>

How can I prevent my layout from disrupting when a Javascript function runs?

I've just added a Javascript function of changeText to make my site have the accessibility feature of making text larger in order for visually impaired users to be able to use my site with more ease. However upon clicking on the icon for 'larger text' which runs the javascript, it messes up my layout. How can I correct this? Would it be CSS? Here is the website:
[www.me14ch.leedsnewmedia.net/slate][1]
and the enlarge text icons are to the right hand side of the header. Or if this helps, this is the code:
<div id="font-size-buttons">
<img src="http://www.me14ch.leedsnewmedia.net/slate/images2/fontmin.png" width="25" height"25" alt="Switch to original text size and colours">
<img src="http://www.me14ch.leedsnewmedia.net/slate/images2/fontmax.png" width="30" height="30" alt="Switch to larger text and improved colour contrast">
</div>
And the Javascript:
function changeText(size) {
var obj = document.getElementsByTagName('html')[0];
obj.style.fontSize = size + '%';
}
Your div#font-size-buttons is inheriting your new font-size:150% rule, which pumps up its height to 48px after click.
To combat this you need to fix it height to let's say 32px, as so:
#font-size-buttons {
float: right;
clear: both;
margin-right: 5px;
font-size: 32px;
}
Hope this helps
EDIT:
You'll need these too:
.intro {
clear: both;
text-align: left;
padding: 4px;
line-height: 1.5;
}
.subgroup1 {
width: 64.54%;
float: left;
margin-bottom: 25px;
margin-top: 5px;
}
(I removed fixed height from .subgroup and decreased margin, to make div more "elastic")
#footer {
max-width: 1000px;
width: 100%;
color: black;
bottom: 0;
position: relative;
font-family: arial, palatino sans-serif;
font-size: 0.75em;
text-align: center;
background: #A3CC39;
clear: both;
border-radius: 5px;
}
(Again - removed height:20px from footer to make div adjusts itself)
Looking at the website yes you need to add css to it to draw your website and limit part of the website so the js does not affect things you dont want to.
but you would need to provide more code of your website so we can help you
I looked quickly and changing you whole css would be too long so the workaround I suggest is that your + and - only change your wrapper div as this is your main content. For this change in your js to be
<script src="accessjava.js">
function changeText(size) {
var obj = document.getElementsById('wrapper')[0];
obj.style.fontSize = size + '%';
}
</script>
and in the body change
<div class="wrapper">
to be
<div id="wrapper">
The last thing will be in your css to replace .wrapper by #wrapper to keep the same style you created.
Hope this will help

how to make and iframe like themeforest.com Preview

how do i make an iframe like themeforest.com using javascript and iframe dom element.
here is the site reference. look at the top black line. and the whole website is loaded under it.
http://themeforest.net/item/focus-simple-one-page-template-2/full_screen_preview/236868
If you are looking to have an iframe that fills an entire webpage, you can just simply set the width and height of the iframe element to 100% with CSS.
Here is some example code demonstrating this idea:
HTML
<div id="header">
Header
</div>
<iframe src="https://developer.mozilla.org/en/XUL/iframe">
</iframe>
CSS
iframe {
width: 100%;
height: 100%;
padding: 0em;
margin: 0em;
border: 0em;
}
#header {
background-color: #00AA00;
font-family: sans-serif;
text-align: center;
line-height: 2em;
font-family: bold;
}
A working example of this code is located at this JSFiddle: http://jsfiddle.net/mq4Rf/7/.

Categories