I want to design a responsive design. But i can't able to do

I want to design a responsive design. But i can’t able to do
below my html

<ion-card class="res-card">
<span class="open">Open</span>
  <img  class="img-size" src="https://cde.peru.com//ima/0/1/6/3/2/1632689/611x458/50-best-restaurants.jpg">
  <span class="card-img-price">Oriental</span>
  <ion-card-content>
    <p>Wait a minute. Wait a minute, Doc. Uhhh... Are you telling me that you built a time machine... out of a DeLorean?! Whoa. This is heavy.</p>
  </ion-card-content>
</ion-card>

.css

page-restaurant-list {
.bg-color{
	background-color: #fff0f2;
}
.res-card{

	//border-radius: 5px;
	position: relative;

}
.open {
	background: skyblue;
	width: 120px;
	font-size: 1.15rem;
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	padding-top: .5rem;
	padding-bottom: .5rem;
	top: 16px;
	right: -32px;
	z-index: 999;
	overflow: hidden;
	text-align: center;
}
.img-size{

	height: 200px;
}
.res-card .card-img-price {
	color: #fff;
	font-size: 1.65rem;
	position: absolute;
	bottom:28%;
	left: 0;
	background-color: rgba(255,158,33,.8);
	padding: 1rem;
	border-radius: 0 4px 0 0;
}
.fw700 {
	font-weight: 700 !important;
}
}

Mobile view
look like this

Full screen view

But i iwant to design look like this

how can i do that please help me anyone.
Thanks

Posts: 1

Participants: 1

Read full topic