On my website, when I show adverts on mobile, I get an odd yellow rectangle obscuring the right-hand side of my Google AdSense:
That's my own wobbly question mark in the the yellow space, and I've fill-flooded the background to make it stand out more.
I've examined the styles through the Chrome Developer Tools window, but I cannot find anything set to yellow in the style hierarchy, and I'm using mostly the bog-standard minileven WordPress-supplied theme. What could be causing this? How can I correct the CSS to get rid of this? Ads look fine on the desktop version, only mobile.
A typical page is this one.
Looking at your site and viewing an Ad I do see some extra spacing (the one I viewed is different than the one in your screenshot)
When I view the DOM this is the code that is causing the extra spacing:
<td class="rh000c">
<div class="rh-box-empty rh000"></div>
</td>
Here is the related CSS:
.rh000c {
height: 102px;
padding: 0;
width: 2px;
}
.rh000 {
background-color: #ffffff;
display: inline-block;
height: 102px;
overflow: hidden;
padding: 0;
width: 2px;
}
For some reason the Ad is passing this code into its iframe so I don't think there is much you can do to remove it. (Well, there might be ways to remove this code but you might violate your service agreement with the Ad agency if you do)
If I were you I would contact the Ads company you are using (it seems that you are using Google Ads) and ask them about this issue directly. Hope that helps.
I had another closer look at the problem, and for some reason or other there is a rule like this:
embed, iframe, object {
width: auto;
}
For some reason that I can't work out, this overrode the explicit <iframe width="320", so by trial and error I found that adding this to my custom CSS:
.mobile-theme .adsbygoogle iframe {
width: inherit;
}
Overrode the width: auto; and I now no longer get my yellow border. There's still a bit of an ugly yellow border at the link widget at the bottom, but at least that's not obscuring anything, so I'll ignore it for now...
Related
I'm trying to position elements in a way so that when the browser width is changed, the webpage will scale everything in proportion, but what happens is that they shift a little. I don't understand why. I can adjust this okay using media queries, but they change drastically in mobile browsers. To illustrate what I'm talking about, I created an example in which I'm trying to keep this black text centered inside this green box. From my example, you'll see that scaling the browser on a desktop will keep the text in the box centered pretty well, but when switching to a mobile browser, the text will go out of the box. What can I do to keep it scaling correctly?
I realize that I can just fill the text div with a green background, but you have to understand that this is just an example of what I'm trying to do. The real webpage is much more sophisticated, so that will not be an option. I need to make sure that these divs scale appropriately. Thank you.
I provided an image to show the problem that I'm getting in my phone browser. It's a bit small, but you can see how the black text dips below the green box.
The example website: http://www.marifysworld.com
CSS:
#viewport {
width: device-width;
zoom: 1.0}
#-ms-viewport {
width: device-width}
body {
margin: 0px;
padding: 0px;
background-color: #fffff}
img {
display: block;
margin: 0px;
padding: 0px}
.text {
font-size: 2.25vw;
color: #000000;
text-align: center;
text-size-adjust: 90%}
.box {
width: 23.75%;
height: auto;
position: absolute;
left: 25%;
top: 40vw}
.divtext {
width: 20%;
height: auto;
position: absolute;
left: 26.75%;
top: 42.5vw}
HTML:
<img class="box" src="http://www.marifysworld.com/images/platform/box.jpg" />
<div class="divtext text">
Why won't this div of text stay in the center of the block in mobile browsers?
</div>
Well, you are using positions for your design but it is confusing and not possible.
Here is an idea to make this design work.
Just try it...
HTML:
<div class="box">
<div class="divtext text">
Why won't this div of text stay in the center of the block in mobile browsers?
</div>
</div>
CSS:
#viewport {
width: device-width;
zoom: 1.0}
#-ms-viewport {
width: device-width}
body {
margin: 0px;
padding: 0px;
background-color: #fffff;
}
.box{
background: url('http://www.marifysworld.com/images/platform/box.jpg');
width: 23.75%;
margin: auto;
margin-top: 20%;
}
.divtext {
width: 90%;
padding: 5% 0;
margin: auto;
}
.text {
font-size: 2.25vw;
color: #000000;
text-align: center;
}
Update: initially I thought the problem might be the (not universally supported) text-size-adjust property, but it seems this is unlikely. I leave those thoughts below just in case they are useful to someone else using that property.
Having been unable to reproduce the problem myself but seeing the useful image now put into the question I think we have to look at the actual font and how it is sized and using space. There are quite a few factors which maybe the browsers are setting different defaults for. Here's a few, there may well be more:
font-family - most obvious but is whichever browser is causing the problem using the same default font as browsers not causing the problem? Try setting a specific font and see what happens
Different fonts will take different widths for different characters. Try a monospace font - that will probably overflow - just to demonstrate the issue
kerning - no I don't fully understand how different fonts use it and what they mean by 'normal' (which is probably the browser's default) but that will also alter the space used as will...
..line height - perhaps that needs to be specifically set
font-weight will alter the space used - do all browsers/systems interpret say 400 exactly the same way
I guess there's loads more that may differ between browsers - for example how exactly do they calculate the spacing needed to center text, will they always break a line at the same place etc.
Sorry this is a waffle, but there are so many factors that could make the text overflow and I don't understand them all in enough depth.
Basically what you need is to be able to scale the text div to force it to fit - for that you would need a bit of JS I think (?or is there an equivalent of contain for divs?)
ORIGINAL STUFF:
I am seeing text stay within the green box on a mobile device (IOS Safari) so I imagine the problem you are having is with another mobile device/browser such as Android.
If this is case the area to look at is the use of the CSS property
text-size-adjust: 90%
There are a couple of things to note here:
According to MDN
This is an experimental technology. Check ... carefully before using in production.
This property is intended to be used in the case where a website has not been designed with smaller devices/viewports in mind.
According to MDN, while Chrome on Android implements text-size-adjust fully, Firefox on Android and Safari on IOS do not support the percentage version.
I may be missing something but the question explicitly states that 'the webpage will scale everything in proportion'. Apart from possible inbuilt browser margin and padding on the div, everything is expressed as vw or % so I cannot see anything else that would have an adverse affect on the text positioning.
I also cannot see why this property is being used. It may or may not be causing the problem, but it certainly may affect how text is displayed on some browsers and it seems to be, at best, redundant for a site that is designed with proportionality in mind from the start.
I have several simple web pages that contain a similar layout. All these pages are embedded in a bigger product within iframe, to keep them independent. Since the iframe can be resized in any way and expanded, can go fullscreen and so on, the page should adapt to it. The chosen solution was to rescale the whole content, as it makes it dramatically simple to create (and media-queries wouldn't work).
I have noticed however a problem when testing on Firefox (v68 x64). When I scale down divs with borders, at some point the borders are scaled inconsistently. Different sides of the divs will either show or not any border. The resulting effect is horrible, and I noticed that this does not happen with other browsers (not even IE11 :D).
I prepared a little jsfiddle to show what happens: jsfiddle
.container {
width: 400px;
height: 400px;
background: black;
transform-origin: 0 0;
padding-top: 30px;
transform: scale(0.4);
}
.btn {
border: 2px solid white;
margin: 20px 30px;
height: 50px;
color: white;
line-height: 50px;
padding-left: 20px;
}
<div class="container">
<div class="btn">Btn 1</div>
<div class="btn">Btn 2</div>
<div class="btn">Btn 3</div>
</div>
This happens when I downscale a div that contains other divs with borders. In this example the second button appears to not have a top-border.
I obviously don't expect all pages to scale down indefinitely and still look good, just have consistent borders that do not disappear. In other browsers it works much better. Does anybody know how this problem could be solved/improved? I am not able to change the underlying conditions (scaling requirements, embedding the page), but I have full access to the page itself and I'm able to change it.
Let me know if you require more details (e.g. Screen details, default page resolution...etc).
NOTE: The suggested duplicate has nothing to do with this issue, while the problem "looks similar", a quick read would show that the browser in question is different, the basis of the problems are completely different, and going further, none of the solutions work.
I'm having some problems centering my logo in my Omega subtheme. When viewed in "inspect element" (Google Chrome) there's no other CSS being applied to my targets. My branding region stretches the full 12 grids across the page. I don't quite know what I'm overlooking.
Let me know if you need any of the HTML. Below is the CSS I've used:
.branding-data {
width: 960px;
background: #333;
height: 50px;
}
.logo-img.center {
display: block;
width: 200px;
margin: 0 auto;
background: #ccc;
}
For anyone suffering with a similar problem, I record unto the annuls of the internet the solution that I found:
If you don't already have Delta installed (recommended whenever using Omega), do it.
Before you begin, it's best to have your logo be the same size as an even number of Omega's vertical grids. (mine is two).
Since Omega's default logo isn't in a block, the best way to mess with the logo's settings is to use Delta Blocks (admin/config/user-interface/delta-blocks). Check "Logo".
Then go Admin your Blocks, and add the "Logo" block to the "Branding" region.
Go into your Omega theme's zones administration (under "Appearance"), change the region's size to the number of columns your logo is (two in my case), and set the correct suffix and prefix (5 before, 5 after for a logo of 2 grids).
In "global.css," select the branding region, and center the text (code is as follows):
.region-branding {
text-align: center;
}
Then, insure that no float is applied to the logo image, and that it has margin: 0 auto
.logo-img {
float: none;
margin: 0 auto;
}
If it doesn't work the first time, remember to always clear your caches before freaking out.
Credit for helping me find this fix goes to the user "banghouse" on the #Drupal IRC channel.
Hopefully this helps someone.
Ive been searching for a method to replace the text-indent: -9999px css-trick used to hide link text and display images as links for say a home Logo button. Ive found a simple solution that seems to work, but doesnt seem to get any hype so Im wondering if there are holes that I dont see.
Below is the solution, with the class="homeButton" applying a css rollover image and the class="hide" obviously hiding the link text. Please let me know if this has any downsides Im not seeing as a way to still have a text based link with the text not showing up on screen normally, but still showing up in screen readers and search engines.
Thanx as always...
<a class="homeButton" href="index.html"><span class="hide">Home Button</span></a>
You don't say exactly how you his the content of .hide, but if the idea is to use display:none, forget it. Elements with display-none are ignored by both screen readers and search spiders, as content hidden is assumed to be irrelevant (not least as black hat SEO-ers could easily stuff hidden text with keywords).
I don't really see what's wrong with the text-indent solution. Granted, I'd reduce the indent value to stop IE6 reserving memory for a huge unused canvas, but it's still the recommended technique for these efforts.
HTML CODE
<h1><a class="homeButton" href="index.html">Home Button</a></h1>
CSS CODE
h1 {
display: block;
width: 386px;
height: 83px;
margin: 11px 0 0 10px;
text-align: left;
overflow-x: hidden;
}
h1 a.homeButton {
display: block;
width: 386px;
height: 83px;
text-indent: -19999px;
background-repeat: no-repeat;
background-image: url("http://existstudio.pl/images//template/ex-ist/ex-ist-logotype.png");
}
DEMO
http://jsfiddle.net/bartekbielawa/rmWhF/
EXPLANATION
the <h1> you can change something you like. I prefere <h1> because is good for SEO
use font-size = 0
.hide {
font-size: 0;
}
I don't know how it has occurred and for the life of me, I cannot fix it.
I have a div which is hidden using display: none;
When a user clicks, I set display: block which shows a new layer.
The problem is that all the text is showing through from the layer behind it... How do I force no transparency from a div behind?
I have set no transparency or opacity in my css.
The layer I am showing only has the following settings:
.display {
background: rgb(255, 255, 255) url(/template/mobile/images/dot.gif) repeat left top;
display:none;
width: 250px;
height:100px;
border: 1px solid rgb(20, 20, 20);
margin-left: -5px;
margin-top: -100px;
float: left;
z-index: 999;
}
As you can see:
I've tried using a 1px background image - still transparent
I've set the background color to white - still transparent
I've tried setting the z-index so it is on top of everything - still transparent
I don't know why it is and how i stop it???
NOTE: I have deactivated the live site and this code can be viewed in testing at: http://dev.cutmyhair.com.au/search_results.php?keyword=waverley
NOTE: This issue is only occurring on the .mobi version of the site (so you need to view it on a mobile phone OR using a mobi emulator)
I was able to reproduce this using FF3 and IE8.
You need to set position to either absolute or relative.
.display {
position: absolute;
...
}
or
.display {
position: relative;
...
}
Are you sure it's a transparency issue? I see another problem:
height:100px
margin-top: -100px
This two together would make your div stay totally out of the page, if the float property is influenced by other elements around. Maybe post here the html portion and other related css rules, so I can understand the situation better. Anyway, first of all, be sure that your div is in the place you think it is, by using a good html/css debugging tool like Firebug or Chrome dev console.
Try using display:inline-block (instead of block). It seems to work better (more intuitively) with floated elements.