<main class="grid-welcome">
      <section class="card header">
        <div class="text">
          <p>Colección de Hebillas</p>
          <h2>Hebillas</h2>
          <a href="#" class="btn">Ver más</a>
        </div>
        <div class="image"></div>
        </div>
      </section>
      <section class="card item-11">
        <div class="image"></div>
          <div class="text">
            <h2>Tendencias</h2>
            <a href="#" class="btn">Ver más</a>
          </div>
      </section>
      <section class="card item-12">
        <div class="image"></div>
      </section>
      <section class="card item-21">
        <div class="text">
          <h2>Importados</h2>
          <a href="#" class="btn">Ver más</a>
        </div>
        <div class="image"></div>
      </section>
      <section class="card item-22">
        <div class="text">
          <p>Ofertas</p>
          <h2>Ofertas</h2>
          <a href="#" class="btn">Ver más</a>
        </div>
        <div class="image"></div>
      </section>
      <section class="card footer">
        <div class="image"></div>
        <div class="text">
          <p>Colección de Hebillas</p>
          <h2>Hebillas</h2>
          <a href="#" class="btn">Ver más</a>
        </div>
      </section>
    </main>

.grid-welcome {
  font-size: 16px;
  display: grid;
  margin: 0 auto;
  max-width: 960px;
  padding: 0 15px;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, 250px);
  gap: 35px; }
  .grid-welcome a,
  .grid-welcome a:visited,
  .grid-welcome a:active {
    font-size: 15px;
    text-decoration: none;
    color: #4e4e4e;
    transition: background-color 0.2s linear; }
    .grid-welcome a:hover,
    .grid-welcome a:visited:hover,
    .grid-welcome a:active:hover {
      border: 1px solid black;
      background-color: black;
      color: white; }
  .grid-welcome .header,
  .grid-welcome .footer {
    grid-column: 1 / -1;
    background: #feeafa; }
  .grid-welcome .item-11 {
    grid-row: 2 / 4;
    grid-column: 1 / 2;
    background: #dee2ff; }
  .grid-welcome .item-12 {
    grid-row: 4 / 5;
    grid-column: 1 / 2;
    background-color: #ffede8; }
  .grid-welcome .item-21 {
    grid-column: 2 / 4;
    background-color: #e6bfff; }
  .grid-welcome .item-22 {
    grid-row: 3 / 5;
    grid-column: 2 / 4;
    background-color: #e6bfff; }
  .grid-welcome .card {
    display: flex;
    align-items: center; }
    .grid-welcome .card .text {
      display: flex;
      flex-direction: column;
      align-items: center;
      font-size: 20px; }
    .grid-welcome .card .image {
      width: 100%;
      height: 100%;
      background: no-repeat center center / cover; }
  .grid-welcome .header .text,
  .grid-welcome .footer .text {
    width: 40%; }
  .grid-welcome .header .image {
    background-image: url("images/header-hebillas.jpg"); }
  .grid-welcome .footer .image {
    background-image: url("images/footer-hebillas.jpg"); }
  .grid-welcome .item-21 .text {
    width: 370px; }
  .grid-welcome .item-21 .image {
    background-image: url("images/panuelos.jpg"); }
  .grid-welcome .item-22 {
    flex-direction: column;
    background-color: #dee2ff; }
    .grid-welcome .item-22 .text {
      height: 60%;
      justify-content: center; }
    .grid-welcome .item-22 .image {
      background-image: url("images/ofertas.jpg");
      height: 100%; }
  .grid-welcome .item-11 {
    flex-direction: column; }
    .grid-welcome .item-11 .text {
      justify-content: center;
      height: 40%; }
    .grid-welcome .item-11 .image {
      background-image: url("images/vaso.jpeg");
      height: 100%; }
  .grid-welcome .item-12 .image {
    background-image: url("images/mask.jpg"); }
  .grid-welcome .btn {
    text-transform: uppercase;
    display: inline-block;
    border: 1px solid gray;
    padding: 10px 20px;
    margin-top: 10px; }

WHAT I’VE TRIED:
Of course already searched here and googled a lot. At first I changed things in the style.css, for example all transitions to none. And all the transform opacity from 0 to 1. I also tried to change it in the functions.js and functions.php and header.php and so on. But I can’t make it work. An example of code here:

<pre>-webkit-transition:none !important;
  -moz-transition:none !important;
  -o-transition:none !important;
  transition:none !important;

@-webkit-keyframes buffer1 {
	0% {
		-webkit-transform: scale(<b>0</b>);
	}
	50% {
		-webkit-transform: scale(1);
	}
}

https://wingsguate.org/

I think it is a CSS3 animation effect.

Good

I’ve followed this example: https://codepen.io/anon/pen/fpjoa

If I create new PHP and CSS files and copy – paste code from link above, results are correct, shown as expected. But If I’m using this code for my WordPress website, It not working with Internet Explorer, look at picture below:

Wrong

As you see above, right corner went wrong. Have you ideas why It happening? Maybe I should change something for IE? But why sample from link above working correctly with IE?

I’m using css on page-wrap -> content-wrapper class in following:

.page-wrap .content-wrapper {
    	position: relative;
    	background: white;/* #f0ab67;*/
    	border:1px solid lightgray;
    	padding: 50px;
    	margin: 0 auto 20px auto;
    }
    .page-wrap .content-wrapper:before,
    .page-wrap .content-wrapper:after {
    	position: absolute;
    	width: 48%;
    	height: 10px;
    	content: ' ';
    	left: 20px;
    	bottom: 40px;
    	-webkit-transform-origin: top right;
    	-moz-transform-origin: top right;
    	-ms-transform-origin: top right;
    	transform-origin: top right;

    	-webkit-transform: skew(-5deg) rotate(-3deg);
    	-moz-transform: skew(-5deg) rotate(-3deg);
    	-ms-transform: skew(-5deg) rotate(-3deg);
    	-o-transform: skew(-5deg) rotate(-3deg);
    	transform: skew(-5deg) rotate(-3deg);
    	-webkit-box-shadow: 0 30px 6px 10px rgba(100, 100, 100, 0.5);
    	-moz-box-shadow: 0 30px 6px 10px rgba(100, 100, 100, 0.5);
    	box-shadow: 0 30px 6px 10px rgba(100, 100, 100, 0.5);
    	z-index: -1;
    }
    .page-wrap .content-wrapper:after {
    	left: auto;
    	right: 20px;
    	-webkit-transform-origin: left top;
    	-moz-transform-origin: left top;
    	-ms-transform-origin: left top;
    	transform-origin: left top;
    	-webkit-transform: skew(5deg) rotate(3deg);
    	-moz-transform: skew(5deg) rotate(3deg);
    	-ms-transform: skew(5deg) rotate(3deg);
    	-o-transform: skew(5deg) rotate(3deg);
    	transform: skew(5deg) rotate(3deg);
    }

Note: I’m using *Sydney* theme.

I enabled the mobile theme in the css editor, but my site still shows the default style on mobile phones. Anyone know how to fix this?

Thanks

https://www.ads-software.com/plugins/jetpack/

I tried many different settings and found out that it’s not happening when I tick the box that disables CSS3 animations. I was wondering if you ever ran into something like that. I guess that it’s probably a conflict with my theme that’s causing it and was wondering if there’s any way to disable those animations only on iPhones?

Thanks in advance!

https://www.ads-software.com/plugins/shiftnav-responsive-mobile-menu/

I’ve searched high and low but cant find a theme/template or plugins that have all the requirements that I need.

I want to “build” a website like this:

Thank you very much in advance!