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.
Related
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
I'm developing a MEAN application that needs to look good on mobile browsers. At first I was trying and failing to use Bootstrap to make this responsive, as I didn't realize Angular was clashing on the Bootstrap and JQuery JS libraries that Bootstrap depended on.
So I found Angular-UI project on GitHub...sorry for no link but I don't have enough reputation.
I'm trying to get the Collapse Navbar to be responsive on a mobile device. (responsive meaning it adjusts to the "hamburger menu" and the names of the links no longer appear in the menu)
I'm failing to get this to work within the bounds of my Node application.
To isolate the issue, I took the HTML and JS from the plunker referenced by the Angular-UI Bootstrap example (which, by the way also appears responsive to small displays when viewed from a iPhone or Samsung Edge) and made a stripped down Node app, which basically returns what is in the Plnkr example, but that still doesn't appear responsive when viewed from a mobile phone browser (I tested mobile Chrome, Safari, and Firefox)
See screenshot of sample app on OpenShift cloud:
http://angbootstrapnotresponsive-215api.rhcloud.com/assets/
This sample is not responsive
Note: If I view my sample in "responsive" mode in the dev tools, or simply resize my desktop browser window, the menu links fold up into that hamburger menu as desired. Only when I try to use the mobile browser from either iPhone 6 or Samsung Edge this responsive Navbar isn't responsive.
thanks in advance for any ideas!
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.