Any idea how to prevent the strange Cumulative Layout Shift (CLS) when page containing AdSense loads?
Website has a responsive design and use AdSense responsive ad units. Before implementing responsive design and using responsive ads there was not any problem because each ad position had defined fixed width and height.
See it live on the web https://cs.renault-club.cz/poradna
See it on YouTube video https://www.youtube.com/watch?v=1pT4fWAtKfU
Related
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'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.
I started working on Mobile First Responsive Design. In mobile, there wont be any sidebar but sidebar is required on desktop so I worked on basic things and then in media query for mobile, hidden that sidebar. Then I needed to make sidebar appear on desktop version of media query.
My question is - How I would have worked on it ?
For the starter, i would like to prefer some basic ideas to build a responsive website:-
Use Layout Flexible
Donot Use tables
Use Media Queries
Use Mobile Viewport Meta Tag
A basic example for a responsive website is that suppose you have a website with content and sidebar which is floated with 70% and 30% width, in mobile or shrink screens, the content panel and sidebar will be width 100% and float none...
That's a simple example for a responsive website...
Rest you can use framework for responsive websites like Twitter Bootstrap or Kendo UI and etc...
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 want to make a javascript image gallery
(with 6 thumbnails in a row and as many rows as fit the page.
clicking the thumbnails will bring up a popup box with images and a video)
At the bottom of the page there is a numbered pagination.
However, I would like to make it so that on a mobile platform (android/iphone)
the user can paginate by swiping the pages to go forward or backward.
How do I adjust the pagination for a mobile platform?
Should I use a specific crossplatform tool like sencha to make this gallery?
Have you thought about using JQuery Mobile ?
http://jquerymobile.com/