What is the best way to adjust the maximum width of Reddit's embedded comment iframe?

Reddit provides a code that can be embedded to display their comments on a website,

As an example:

<div class="reddit-embed" data-embed-media="www.redditmedia.com" data-embed-parent="false" data-embed-live="false" data-embed-uuid="24a3e666-f855-4664-8e9e-9d040fef3ca6" data-embed-created="2016-06-29T16:56:02.732Z">
  <a href="https://www.reddit.com/r/Showerthoughts/comments/2safxv/we_should_start_keeping_giraffes_a_secret_from/cno7zic">Comment</a> from discussion <a href="https://www.reddit.com/r/Showerthoughts/comments/2safxv/we_should_start_keeping_giraffes_a_secret_from/">We should start keeping giraffes a secret from young children. Imagine discovering giraffes exist when you were like 15. &quot;Woah! Check out that long necked horse!&quot;</a>.
</div>
<script async src="https://www.redditstatic.com/comment-embed.js"></script>

When pasted into HTML, it will render as an iframe with content.

The max-width property of this iframe is initially set to 800px. How would I go about changing it to a different value or even none?

Fiddle

javascripthtmlcssiframereddit

Answer №1

When you need to override an inline style that you cannot access directly, it is necessary to use !important. This should only be used in extreme cases (otherwise, avoid it).

iframe {
  max-width: none !important
}
<div class="reddit-embed" data-embed-media="www.redditmedia.com" data-embed-parent="false" data-embed-live="false" data-embed-uuid="24a3e666-f855-4664-8e9e-9d040fef3ca6" data-embed-created="2016-06-29T16:56:02.732Z"><a href="https://www.reddit.com/r/Showerthoughts/comments/2safxv/we_should_start_keeping_giraffes_a_secret_from/cno7zic">Comment</a> from discussion <a href="https://www.reddit.com/r/Showerthoughts/comments/2safxv/we_should_start_keeping_giraffes_a_secret_from/">We should start keeping giraffes a secret from young children. Imagine discovering giraffes exist when you were like 15. &quot;Woah! Check out that long necked horse!&quot;</a>.</div>
<script
async src="https://www.redditstatic.com/comment-embed.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering an obscure issue when using Discord.js v14 after attempting to cancel and resubmit a modal

I'm currently working on a Discord bot using modals in Discord.js v14. These modals appear after the user clicks a button, and an .awaitModalSubmit() collector is triggered to handle one modal submission interaction by applying certain logic. The .awa ...

javascripttypescriptdiscorddiscord.js

Using Angular to track objects by their unique ID

Upon receiving data from a REST api, I am faced with the following JSON content. [ { "names": { "en": "test123" }, "children": [], "id": "68d87e8c-42f5-4f11-b25a-b30624246c3b", "version": 1, "code": "0", "order": 0, ...

javascriptjsonangularjs

Is it possible to dynamically change an ngModel value directly from the component?

I'm currently immersed in an Angular project and my initial file setup was like this: dog.ts: export interface Dog { name: string; age: number; breed: string; } dog.component.ts: import { Dog } from '../dog'; @Component({ //setup ...

javascripthtmlnode.jsangulartypescript

Error: The hook call is invalid and can only be made within the body of a function component in ReactJS

Hello everyone, I am currently facing an issue with saving the lat and lng variables in the state within a hook. When trying to do so, I encounter the following error message: "Error: Invalid hook call. Hooks can only be called inside the body of a functio ...

javascriptreactjsreact-hooksnext.js

What is the best way to create hover effects on buttons in Vue.js 3?

I'm currently developing a calculator to practice my Vue.js 3 skills (I am new to vue). I've successfully implemented the basic features, but now I'm exploring how to incorporate hover animations on the buttons. Specifically, I want to diffe ...

javascriptvue.jsvuejs3

Conflicts between Bootstrap Validator and Ajax.BeginForm in Partial Views of MVC

My current issue involves using Ajax.BeginForm to post data on a form without refreshing the entire page. The goal is to validate a textbox - if it has a value, then the data should be posted; otherwise, a validation message should be displayed. However, I ...

javascriptjqueryajaxasp.net-mvctwitter-bootstrap

The d3.select function is failing to update the chart on the website

I am facing a challenge in updating data in a d3 chart with the click on an HTML object #id. After successfully coding it in jsfiddle, I encountered issues when implementing it on a web page. The scenario involves a simple leaflet map where the chart is d ...

javascriptjqueryhtmld3.js

The custom validator in Material2 Datepicker successfully returns a date object instead of a string

Im currently working on developing a unique custom validator for the datepicker feature within a reactive form group. Within my code file, specifically the .ts file: form: FormGroup; constructor( private fb: FormBuilder, ...

javascriptangulartypescriptdatepickerangular-material2

Create your masterpiece on a rotated canvas

My goal is to draw on a canvas using the mouse, even after rotating and scaling the canvas container. The issue I am facing is that the mouse coordinates get affected by the rotation and scaling, making it difficult to draw correctly. I have tried switch ...

javascripthtmlcanvashtml5-canvas

Encounter an issue while using CreateAsyncThunk due to a 400 Bad Request

I have encountered an issue with my asynchronous thunk. Even when the status code is 400, the request result remains fulfilled. How can I handle a 400 error using createAsyncThunk and the fetch API? This is the action code: import { createSlice, creat ...

javascriptnode.jsreactjsredux-thunkredux-toolkit

Performing an ASync call to the GetData routine in MongoClient using NodeJS

Combining code snippets from https://www.w3schools.com/nodejs/nodejs_mongodb_find.asp and https://stackoverflow.com/questions/49982058/how-to-call-an-async-function#:~:text=Putting%20the%20async%20keyword%20before,a%20promise%20to%20be%20resolved. Upon ob ...

javascriptnode.jsasync-await

Changing the shape of a background using CSS when hovering

My Bootstrap navigation has a unique setup, as shown below. I've observed that many users tend to only interact with the headings and ignore the submenus where the actual products are located. To address this issue, I want to change the design of th ...

javascripthtmlcss

Trouble navigating from plugin to theme folder: reference behaving unexpectedly

In a specific wordpress theme, the javascript and jquery files can be found at /functions/extended/js/ Originally, they were located in a plugin folder. I now need to change the references to a folder within the theme. This was my original code: if ( is ...

javascriptjquerywordpressplugins

When large spheres meet, Three.js/WebGL displays them as fractured

I must admit that I am not very experienced with 3D graphics. Issue In my WebGL model using Three.js, I have intentionally made two spheres collide. However, when the spheres are extremely large, they appear "broken" at the point of intersection, whereas ...

javascriptthree.jsgeometrywebgl

Creating a dynamic feature in React where multiple icons change color individually when hovered over, all implemented

I'm looking to customize the icons in my footer by changing their colors when users hover over them. I have already created a CSS class with the necessary hover effects, but now I want to pass a parameter in my JSX file that specifies which color shou ...

htmlcssreactjshoverfont-awesome

Set a variable to contain a specific scope in JavaScript

I'm struggling to pass user input from a text box stored in $scope to a firebase query. Here's the code I have so far: $scope.array = []; $scope.addListItem = function(quote){ $scope.array.unshift(quote); console.log(quote) this.customQuote = ...

javascriptangularjsangularjs-scope

Guide on setting up a shortcut key for an input field

Currently, I have a collection of images each with its own HTML page. I added an input button that when clicked, takes you to the next image. However, I would like to enhance user experience by allowing them to use keyboard arrows for navigation. Being new ...

htmljquerybuttonkeyboard-shortcutshotkeys

To display a pattern with a series of alternating addition and subtraction operators, starting from -1 and ending at n, use JavaScript to iterate through the numbers and implement the pattern -1+

I've been struggling to locate the values despite numerous attempts. What steps can I take to resolve this issue? Below is my code snippet: var numVal = prompt(""); for (var i = 1; i <= numVal; i++) { if (i % 2 !== 0) { console.log("-"); ...

javascript

What is the best way to display every comment and response using console.log()?

Currently, I am developing a commenting system where users can leave comments and reply to existing comments. In the MySQL database image Both images depict the same scenario. In my highlighted text in yellow, it should read comments[0] instead of comment ...

javascriptarraysif-statement

Issue with IntersectionObserver not detecting intersection when the root element is specified

I am encountering an issue with my IntersectionObserver that is observing an img. It works perfectly when the root is set to null (viewport). However, as soon as I change the root element to another img, the observer fails to detect the intersection betwee ...

javascripthtmlcssvue.jsintersection-observer