Muhct Comments - Answer Overflow

In your experience, what things or CSS properties did you notice that behave differently in different devices? For example on google chrome+firefox the text-clamp I had worked great, but didn't worked at all on a iOS device using Chrome

54 replies

KPCKevin Powell - Community

•Created by Muhct on 1/19/2023 in #front-end

Is there a way to properly check how your website looks on different devices?

Yup, in my experience vw/vw is too unpredictable so I don't use it

54 replies

KPCKevin Powell - Community

•Created by Muhct on 1/12/2023 in #front-end

Is chrome dev tools responsive view working correctly?

In this case if I refresh it looks the same (can horizontal scroll) - it only looks different aka correctly once I restart devtools

6 replies

KPCKevin Powell - Community

•Created by Muhct on 1/10/2023 in #front-end

Removing the built-in padding-margin of SVGs

Sorry, I forgot to give an update, turns out there was actually no issue because even though when I use inspect element and hover over the <path /> I get a big skyblue square that overlaps with the other elements shown in the picture, it's not like it actually takes all that space. I added a className of "my-element" to the path, added an eventlistener to console log something when that classname is clicked, and it works correctly. As in, if I click 2px outside of the green graphic, nothing gets consolelogged

12 replies

KPCKevin Powell - Community

•Created by Muhct on 1/10/2023 in #front-end

Removing the built-in padding-margin of SVGs

Oh ok, I would have to make some changes to it/make it more generic before sharing it, it will take me a bit. In the image I'm hovering over the path (everything is a big SVG)

12 replies

KPCKevin Powell - Community

•Created by Muhct on 1/10/2023 in #front-end

Removing the built-in padding-margin of SVGs

I see, so it would be impossible to make it so that the green-related popup doesn't open up when you click outside of the green "Strategy" shape?

12 replies

KPCKevin Powell - Community

•Created by Muhct on 1/9/2023 in #front-end

Transform translate(X, Y) differs in Mozilla & Chrome

9 replies

KPCKevin Powell - Community

•Created by Muhct on 1/9/2023 in #front-end

Transform translate(X, Y) differs in Mozilla & Chrome

Interesting, I had no idea what quirksmode was, maybe NextJS is doing it automatically...I do have a doctype definition at the top of my page but I'm not sure if I'm missing someting which is maybe causing the issue

9 replies

KPCKevin Powell - Community

•Created by Muhct on 12/25/2022 in #front-end

Add a circle to a CircleProgress component

Oh wow that's amazing, thank you!

5 replies

KPCKevin Powell - Community

•Created by Muhct on 12/12/2022 in #front-end

Creating a 2-column 2-row flexbox structure

thank you!

6 replies

KPCKevin Powell - Community

•Created by Muhct on 10/27/2022 in #front-end

How to add a class to the body tag inside an Iframe

I do have access to the json data but the embed I have right now also includes some styling, inputs, filters, etc - If I could add a class to the body tag highlighted it would be much simpler, but I wasn't able to do it with the code I shared two messages above

9 replies

KPCKevin Powell - Community

•Created by Muhct on 10/27/2022 in #front-end

How to add a class to the body tag inside an Iframe

I followed that example and the styling I added (background color change) appears for half a second and then disappears... So I tried to add a class to the body inside the iframe like this:

const x = document.querySelector("iframe").contentWindow;
const xBody = x.document.querySelector("body").classList.add('myclass')

const x = document.querySelector("iframe").contentWindow;
const xBody = x.document.querySelector("body").classList.add('myclass')

but I don't see the class added when I inspect element on the website. Am I doing it correctly?

9 replies

Gaming

Programming