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) {