I've completed my responsive design, except the adsense implementation.
When for example a visitor changes the orientation of the tablet, the size of the ad should change automatically.
At the moment, I'm not getting it to work without a page refresh.
The ad only changes when I refresh the page, but that's not what a visitor would do.
According to Adsense support it has already been implemented:
Support for ad size changes after a screen orientation change. If your responsive page changes its layout following a device orientation change (e.g., when a tablet or phone goes from portrait to landscape), we’ll request and load a new ad of the correct dimensions to fit the new page layout.
However, I'm not getting it to work. Am I understanding it the wrong way, or am I missing something?
If it's not supported by Adsense yet, is there a workaround (allowed by adsense)?
EDIT: I just found out it is actually working on my smartphone. It just doesn't work with window resizing, but that's not really a problem. So I guess this is solved.
Pay close attention to the official "Technical considerations" at About responsive ad units
Your site uses third-party JavaScript
The parent container has no width set
In my case, responsive design was not setting an explicit width on viewports below 467x. As a result, the units would resize when going from portrait to landscape, but not vice versa from landscape to portrait. This resulted in a an ad unit stretching the content column wider than the viewport, and worse no ability to zoom out.
Setting an explicit width for the ad unit using a media query solved the issue, and now the units resize and cache exactly as described.
Related
I have the next question. I am developing a react application with some images. The user has the possibility to click and open a full-page image. Because the image's orientation is horizontal on the mobile, it does not look good. My idea is when the user clicks on the full page icon, the orientation of the phone becomes horizontal as is implemented on youtube. I tried to find some information about that, but I am not sure if it is even possible, I saw that only by using react native and developing mobile applications you can have access to the user's orientation of the screen. But maybe there are some methods to do in the browser? Thanks in advance.
It is not possible to change this from the web, however you could simply rotate the image and display it full screen. This has been done here:
CSS Rotate Portrait Image 90 Degrees and Make Image Full Screen
I have a page written in AngularJS and Material Desing for AngularJS. MD is a responsive user interface, and in this page I have placed a responsive ad unit.
The problem is that it seems that this responsive ad unit is not taking advantage of the responsiveness of Material Design and is always displaying ads in the smallest unit possible.
The ads are being displayed inside a md-card and I have a feeling that they are not able to correctly detect the element's width and height, and that's why it's displaying the smallest ad unit available always - on mobile or even on a desktop.
The page is live here, you can check its source code.
I have a site which uses a different menu for mobile devices than on the Desktop version using media queries. If I resize a desktop browser window to a mobile width and click the mobile navigation dropdown button and then resize the window back to desktop size, the mobile menu remains visible instead of changing back to display:none. Unfortunately this site is still in staging so I cannot show you a live example, but I was hoping someone could point me in the right direction of getting that DIV to become hidden again once the window is resized back to full screen.
Also, I realize that the chances of this scenario playing out in the real world are slim, but the client would like for it to be addressed anyway.
Thanks!
I figured out that it was javascript that was showing the DIV in the first place, not a media query, so I just added display:none to the div for the Desktop media query and the issue has gone away. Thanks!
We want to load a responsive website inside a DIV somewhere on a page. This div is smaller than the view port. The CSS that applies to this DIV (and thus responsive website) uses media queries to alter it's appearance.
The problem is that these media queries use the actual view port of the complete page rather than the width of the DIV that contains the responsive website. Due to this the responsive website may look all wrong.
Is there any way to alter the view port size that the #media queries use? Or any way we can influence the view port on a desktop device?
Note that due to certain limitations we CAN NOT use an iFrame. An iFrame would solve the problem.
I am modifying a website's CSS to make it responsive. I'm ready to start throwing media queries all over the place, but something occurred to me:
When you turn a tablet to switch it from portrait to landscape mode or vice versa, does the 'width' attribute that media queries run off of ("min-width", "max-width", etc) change?
This'll help me figure out whether I need to write twice as many sets of just how many sets of variant CSS I need to write.
Yes, it changes. The browser will always render content according to the display width, unless you've told it not to.