Как отобразить текст в одной строке, используя @media?

Question

У меня есть текст, который я смог выделить и отобразить в одной строке с помощью запроса @media.

Сам CSS работает без запроса @media на мобильных устройствах, но на десктопе - нет, поэтому я применил запрос @media ниже 768px, который работал на мобильных устройствах. Как только я попытался применить CSS к рабочему столу, хотя с помощью запроса @media выше 768px, а именно с 768px до 5000px, он не отображает, как я хочу.

По сути, я хочу, чтобы текст на одной строке в мобильном телефоне с небольшим промежутком между ними, которого я достиг, и то же самое на рабочем столе.

Мой рабочий стол @media запрос не работает.

Вот мой код CSS:

@media (max-width: 5000px) and (min-width: 768px) {
  .findanevent {
    float: left;
  }
}

@media (max-width: 5000px) and (min-width: 768px) {
  .event {
    float: right;
  }
}

Вот мой HTML-код:

<div class="lasvegas">
Events</div>
<div class="findanevent"> </div>
<div class="event_wrapper"><a 
href="https://adsler.co.uk/find-an- 
event/"><span id="findanevent" 
class="event">Find an Event</span>. 
</a>
<a href="https://adsler.co.uk/post- 
an-event/"><span id="postanevent" 
class="event">Post an Event</span>. 
</a></div>

Вот страница, если она помогает: https://adsler.co.uk/events/

Answer 1

Вы можете настроить поля в соответствии с вашими потребностями.

.event_wrapper{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 'a b c'
                       'd e f';
}


.Lable1{
  grid-area: b;
  text-align: center;
  line-height: 35px;
  font-size: 30px;
  margin-bottom: -70px;
}

.Lable2{
  grid-area: d;
  text-decoration: none;
  text-align: center;
  line-height: 35px;
  font-size: 30px;
  margin-left:20%;
}

.Lable3{
  grid-area:f;
  text-decoration: none;
  text-align: center;
  line-height: 35px;
  font-size: 30px;
  margin-right:20%;
}

	<div class="event_wrapper">
      <div class="Lable1"><h2>Events</h2><br></div>
		<div class="Lable2"><a href="https://adsler.co.uk/find-an-event/">
    <span id="findanevent" class="event">Find an Event</span>.</a></div>
		<div class="Lable3"><a href="https://adsler.co.uk/find-an-event/">
    <span id="findanevent" class="event">Find an Event</span>.</a></div>
		</div>	
	</div>