What is the best way to align these Iframes in the center?

This is the html

<div class="main_content">
    <section class="episodio">
      <article class="contenedor_episodios">
        <h2>Episodios</h2>
        <div class="episodio_spotify">
          <iframe
            src="https://open.spotify.com/embed-podcast/show/2ySVrxGkN6n6frMTo9Nsrt"
            width="100%"
            height="225"
            frameborder="0"
            allowtransparency="true"
            allow="encrypted-media"
          ></iframe>
        </div>

        <div class="episodio_spotify">
          <iframe
            src="https://open.spotify.com/embed-podcast/show/4kYCRYJ3yK5DQbP5tbfZby"
            width="100%"
            height="225"
            frameborder="0"
            allowtransparency="true"
            allow="encrypted-media"
          ></iframe>
        </div>

        <div class="episodio_spotify">
          <iframe
            src="https://open.spotify.com/embed-podcast/show/5JxcIaIkN8zx3Zy7yD9snv"
            width="100%"
            height="225"
            frameborder="0"
            allowtransparency="true"
            allow="encrypted-media"
          ></iframe>
        </div>

        <div class="episodio_spotify">
          <iframe
            src="https://open.spotify.com/embed-podcast/show/2Iibd5A6R7mxkCm4NwNmUn"
            width="100%"
            height="225"
            frameborder="0"
            allowtransparency="true"
            allow="encrypted-media"
          ></iframe>
        </div>
      </article>
    </section>
  </div>

And this is the CSS for this piece of code.

    .main_content {
.episodio {
  grid-area: auto;
  padding-bottom: 100px;
  background: linear-gradient(#0000ff, #0000a3);
  .rectangle_background {
    .contenedor_episodio {
      display: grid;
      // justify-items: center;
      grid-template-columns: auto auto;
      .episodio_spotify {
        width: 500px;
        height: 300px;
        margin: 0 auto;
        display: flex; /* new */
        align-items: center; /* new */
        justify-content: center;
        //grid-template-columns: repeat(auto-fit, minmax(400px, 2fr));
        iframe {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

}

Im tried different solutions to center this Iframes based on this question

https://stackoverflow.com/questions/45536537/centering-in-css-grid/45599428#:~:text=Use%20margin%3A%20auto%20to%20vertically%20and%20horizontally%20center%20grid%20items.&text=To%20center%20the%20content%20of%20grid%20items%20you%20need%20to,margins%20to%20the%20new%20elements.

but I can't seem to get the title "Episodios" or the spotify Iframes to center properly.

Is there something I'm missing? Any advice would be appreciated.

Regards

EDIT:

Using a css query, the mobile view seems to work fine. I believe the issue lies in it still utilizing the css code from the mobile view of 360px.

@media screen and (min-width: 1024px) and (max-width: 1440px) {

htmlcss

Answer №1

give this a shot

.spotify_episode {
  width: 500px;
  height: 300px;
  margin: 0 auto;
}

.spotify_episode iframe {
  width: 100%;
  height: 100%;
}

hopefully I grasped your question correctly

Answer №2

After some troubleshooting, I discovered that the issue stemmed from a missing div called .rectangle_background. In previous iterations, I had deleted this div, causing the CSS to malfunction entirely. – Andresfjobs just now Edit

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

The iPhone display scaling issue is causing difficulty viewing the entire website

Currently experiencing difficulties with a page that lacks sufficient content, resulting in a smaller height. As a result, the iPhone is scaling the page and cutting off the full menu bar (960px wide). I attempted to set a minimum height using a media quer ...

iphonehtmlcssmedia-queries

Is it possible to relocate an iframe outside the body of a post in Blogger?

For my blog posts, I have a goal of relocating the first iframe used outside of the post body and into a custom div called #myvideos. Some blog templates, such as this example, have already achieved this by moving a video out of the post body. I would like ...

jquerycssiframeblogger

Prevent parent element from changing color when child element is clicked

Check out my HTML: .imageURL:active .image_submit_div { background-color: #ccc; } .image_submit_div:active { background-color: #e6e6e6; } <div class="image_div"> <label for="id_image" class="image_submit_div"> <h3>+ add ...

javascriptjquerycss

Bootstrap table exceeds the boundaries of the smartphone screen

I'm currently working on my first laravel project with bootstrap (https://getbootstrap.com/) and I've encountered an issue related to mobile device responsiveness. The problem arises when using a basic table in bootstrap4 (the absence of the res ...

htmlcsstwitter-bootstrap

What is the best way to create a line break in a flex div container to ensure that overflowing items wrap onto the next line using

Using material-ui popper to display a list of avatars. Trying to arrange the avatars horizontally within the popper. <Popper style={{ display: 'flex', maxWidth: '200px', }}> <div style={{ marginRight: '20px' }}&g ...

javascriptcssreactjsmaterial-ui

Insert the characteristics of the object into the header of the table, and populate the rows of the table

I have created an HTML table that displays specific object properties when the mouse hovers over a designated object. For example, hovering over the dog object will display the dog's name. I want to expand this functionality to also show the cat' ...

javascriptjqueryhtmlarrays

New Ways to Style the Final Element in a PHP Array - Part 2

So, here's the current challenge I'm facing along with a detailed explanation of what I'm trying to achieve. Initially, following your suggestions worked smoothly; however, things took a drastic turn when I altered the ORDER BY field and int ...

phpcssarrays

Update the HTML weather icon with data from JSON

I have a collection of weather icons stored on my computer. How can I customize the default weather icons with my own set of icons? In the JSON file, there is a variable like this: "icon":"partlycloudy" <html> <head> <script src="http://c ...

javascriptjqueryhtmljson

What is the best way to make a CSS class appear in my javascript using the method I have been using before?

I am facing an issue in making this code work properly. It functions correctly for my caption element as there is only one caption tag in my HTML. However, the same code does not work for my TR element since it requires a for loop to iterate through multip ...

javascriptcss

Using AngularJS to bind radio buttons to ng-model

Here is a snippet of my HTML code where I attempted to bind the "formFriendsAll" scope to the ng-model. <form ng-submit="submitForm()" > <div class="col-sm-3"> <div class="form-group"> <label>Which Persons to show?< ...

javascriptangularjshtmlradio-buttonangularjs-ng-model

CSS for Positioning Elements Side by Side Using Absolute Positioning

I'm having trouble figuring out how to position balloons like the ones shown in this image: <div class="red_frame"> <img src="https://i.sstatic.net/54SMF.png" class="r_over"/> <img src="https://i.sstatic.net/54SMF.png" ...

htmlcss

The functionality of jQuery's .hide method is not effective in this specific scenario

HTML section <div class="navigation-bar"></div> Jquery & JavaScript section function hideUserDiv(){ $('.ask-user').hide(); } var ask = '<div id="ask-user" style="block;position:absolute;height:auto;bottom:0;top ...

javascriptjqueryhtmlcss

Various placements in Internet Explorer, Chrome, and Mozilla Firefox

Currently, I am working on a website project The layout appears to be fine in Internet Explorer and Firefox, but there seems to be an issue in Chrome. Due to the length of the code, it cannot be posted here, so I have included links to the files: HTML: ...

htmlcsscross-browser

What are the steps to testing a webpage designed for Retina display?

I have designed a webpage optimized for retina display, but I don't own a monitor with that capability. Is there a simulation tool available to test websites on retina displays? Alternatively, are there non-Apple monitors comparable to Apple's ...

htmlretina-display

Ensure that the HTML link is valid and authenticated using SESSIONS

When creating a website, one of the initial tasks I like to tackle is adding links at the bottom of the page for checking valid HTML and CSS: HTML5  •   CSS <div> <a href="http://validator.w3.org/check?uri=referer" ...

javascripthtmlajaxvalidation

Can you explain the steps to implement this feature in a modal window using jQuery?

My HTML list contains a bunch of li elements. ul li img .det li I am looking to create a modal popup that appears when I click on something. I want this modal popup to have previous and next buttons, preferably implemented using jQuery. I have alr ...

javascripthtmlcss

Tips for organizing checkboxes in rows horizontally

My question is related to this issue I am trying to arrange my checkboxes in 4 columns horizontally <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> ...

javascripthtmlcssbootstrap-5

Having trouble with your contact form sending messages?

Looking for some assistance with the Contact form on this Codepen page: https://codepen.io/ssbalakumar/pen/uzDIA The form is displaying correctly on my website, but when I try to submit it, the page reloads and I'm unsure where the message is being ...

html

flex child moves outside parent when available space shifts

My dilemma involves a flex container (A) containing two or more flex items stacked in a column. The top flex item (B) is a Bootstrap Collapse panel, while the bottom item (C) consists of two horizontal divs (D and E). The problem arises when the collapse p ...

htmlcsstwitter-bootstrapflexbox

Equal size images displayed within cards in Material UI

Is there a way to create a list of Material UI components with images that have uniform height, even if the original images vary in size? I want to make all image heights responsive and consistent across all cards. Any suggestions on how to achieve this? ...

javascriptcssreactjsmaterial-ui