responsive-design | Next Web news website as an exercise from Microverse

If this two pages:

• https://internetingishard.com/html-and-css/responsive-design/example/default-viewport-zoom/responsive.html
• https://internetingishard.com/html-and-css/responsive-design/example/disabled-viewport-zoom/responsive.html

are opened in the Chrome Dev Tools with Device Mode turned on, they look differently. The difference in them is this tag in the head:

I want to get a value (content) from the CSS of a pseudo element (::before) while inside a test made using WDIO and Appium for an Android hybrid app because the designer has stored the current responsive-design state there. So my tests would know which layout (elements) to expect.

Multiple answers to related questions (1; 2; 3) indicated that using .getComputedStyle() might be the only solution. But this does not seem to work in my tests. The error is window is not defined for window.getComputedStyle(...) or document is not defined if I use document.defaultView.getComputedStyle(...). Also selectors themselves can't address pseudo-elements it seems.

Example of one of my many attempts:

I have problem with my responsive-design. All elements are changing when I resize height and width of browser but background image is changing only when I change height. When I'm changing width then it's same.

Normal: https://imgur.com/a/GcpEnPy

Change width: https://imgur.com/a/DrS3k8E

Thanks for all your help

I am referencing this guide on how to "make a mobile friendly website." It does not seem to be taking effect on my Chrome-Browser for Android.

SYNOPSIS

I'm trying to take a multi-piece banner that sits horizontally on the top of the page when viewed in a reasonably sized window on a desktop / laptop / tablet and rotate it (-90deg) so that it appears vertically on the left-side of the page when viewed on a small screen (e.g.: phone).

This is kind of a follow-on from a previous idea - where I switched between two different banners and had the text in the banner go vertically down without rotating them. There are some issues with that solution such that I'd like to see if I could just rotate the horizontal banner I have (with some minor mods)

I found a similar concept here - with this jsfiddle demo, but couldn't seem to get it to work for me.

I am reproducing my problem in responsive design for html wide table. basically I have a very wide table and the table will be placed inside a div with ten columns width (I am using bootstrap here). The problem is the body of the table is bounded by the body width the rest was truncated, when I scroll the table to right I can only see the header and the body was empty.

I was curious if there was a way to create a responsive-designed website that could be put on the app store as a hybrid-mobile application in which the hybrid-mobile application just opened the default browser of your phone, put it in full-screen mode, and then launched the website url to your responsive-designed website?

I dev an Winforms app and want deploy it on raspbian with Mono. I use responsive class i found here When I launch it on windows device it works well but on linux the control width is larger so my window overflow my screen width.

Your help is welcome because i don't know why this happen.

app on windows screen : app on windows screen

app on linux screen : app on linux screen

I found this very useful site Vertically Responsive Design : Keeping Things Above The Fold where its shown how to create div that scales text within it when adjusting the browser window height (not width).

What i'm searching for is to do the exact same thing but with an image. In other words an image that scales in and out when adjusting the browser window height while keeping it's proportions.

Anyone have any suggestions?

Thanks!

UPDATED: Fiddle here: https://jsfiddle.net/1pu67mLg/

This is the HTML for the text (from nitinh.com):