Tips for showing text horizontally with @media queries?

After successfully displaying text on the same line using an @media query, I encountered issues with CSS not working as expected in desktop view without the query. To address this, I applied an @media query below 768px, which resolved the mobile display but failed to meet my desired layout for desktop above 768px.

The goal is to have the text appear side by side with a slight spacing both on mobile and desktop screens.

Despite efforts, my @media query for desktop remains ineffective. Below are snippets of the CSS and HTML code:

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

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

HTML Code:

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

If you want to see the page for reference, follow this link:

htmlcsswordpress

Answer №1

You have the flexibility to customize margins based on your requirements.

.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>

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

Design the header and body of the table in a visually appealing format

$("input:checkbox:not(:checked)").each(function() { var column = "table ." + $(this).attr("name"); $(column).hide(); }); $("input:checkbox").click(function() { var column = "table ." + $(this).attr("name"); $(column).toggle(); }) <script src="h ...

javascriptjqueryhtmlcss

Extract data with Python Selenium

Can someone help me figure out how to extract the value "document sent" from the HTML code below using Python's Selenium library? I've tried the code snippet provided, but it returns None. print(driver.find_element_by_id('errorMessage' ...

pythonhtmlselenium

Is it possible to animate multiple SVGs on a webpage with just the click of a button?

Is there a way to trigger the animation in the SVG each time a next/prev button is clicked while navigating through a carousel where the same SVG is repeated multiple times? The carousel is built using PHP and a while loop. jQuery(document).ready(function ...

javascriptjquerycssanimationsvg

Using jQuery to append a new item to a JSON file

I have a straightforward JSON file containing a few pieces of data. Here is an example: { "id": 1, "name": "Porsche", "type": "911", "price": "135000" } My task is to create an HTML form with inputs for name, type, and price. When the user s ...

jqueryhtmljsonforms

Creating a primary php file in Apache without the use of SQL or any database: is it possible?

Forgive me if this comes across as rude, but I'm struggling to grasp the concept of apache, PHP, and servers in general. To help myself understand better, I want to create a very basic website that assigns an ephemeral ID to each user (not a session). ...

javascriptphphtmlapache

Is it possible to swap out the content within a <div> element with an external piece of HTML code using JQuery or JavaScript whenever the viewport dimensions are adjusted?

<html> <head> </head> function () { var viewportWidth = $(window).width(); if (viewportWidth < 700) { $('#wrapper').load('A.html'); }; <body> &l ...

javascriptjqueryhtml

Center a DIV class with CSS

Experiencing some challenges with CSS in relation to layout problems. Take a look at this screenshot: In my CSS, I have implemented the following: .image{float:right; padding-top:10px; padding-left:10px; padding-bottom:10px;} .description{font-size:15px; ...

htmlcss

Triggering a sweet alert on a mouse click

Here is a code snippet I found on . It shows an alert box that doesn't disappear when clicked outside of it. swal({ title: "Are you sure?", text: "You will not be able to recover this imaginary file!", type: "warning", showCancelButton: true, ...

javascriptjqueryhtmlsweetalert

Attempting to update an AJAX field with the returned value, but it only updates after clicking away from it

Image of form utilizing AJAX & JS The current setup involves a maintainer that uses AJAX to update the "Calc" field in response to a number entered in the "Order No" field. The issue is that the "Calc" field does not update immediately after typing in the ...

javascriptjqueryhtmlajax

The background of the body isn't showing up on the

I'm having trouble setting the background on my page. The background works for another div on the same page, but not on the body background itself. <!DOCTYPE HTML> <html> <head> <title>iDeas.com</title> <link rel=" ...

htmlcss

Guide to aligning form data with Bootstrap

Struggling to align my form data in the center below. I have attempted various online solutions without success. The use of bootstrap and offset is causing issues with the title for the form and the actual form itself. Any suggestions would be highly appre ...

htmlcssformstwitter-bootstrap-3centering

What is the best way to redirect to the index page after successfully submitting a new record on the front-end? [Using Rubymine 2020.2.3, Ruby 2.7.2p137, and gem 3.1.2]

For weeks now, I have been struggling with a college project course, unable to resolve an error despite the advice given by colleagues and tutors. In my create method for a specific table, I am facing an issue where the page should redirect back to the in ...

htmlruby-on-railsrubyrubygemsrubymine

The images in my gallery refuse to hover or respond to my clicks

Ever since integrating this cropping effect (http://jsfiddle.net/BPEhD/2/) to my gallery images, I've encountered an issue - the hover state is missing and I can't click on the images either. Although the pointer cursor appears when I hover over ...

javascriptjquerycsshoverimage

I seem to be having an issue here - my style sheet just won't load

I am having an issue with my external style sheet named style.css. style.css #topbar { background-color: red; width: 1000px; height: 40px; } body{ background-color: green; } I have tried calling this style.css from the root folder, but it's not ...

htmlcss

How can I make a child of Object3d in Three.js face the camera?

One challenge I am facing involves an Object3d composed of 6 planes arranged to form a cube. After applying quaternion rotation based on mouse input and bringing the cube to a stop, my goal is to have the cube align itself directly with the camera at its c ...

htmlcanvasthree.js3d

How come my DHTML navigation bar is displaying incorrectly in Internet Explorer 7?

This particular issue has me completely baffled. Normally I can navigate through most IE7 CSS bugs with some clever adjustments here and there, but this one has really stumped me! Take a look at the example page in IE7 and you'll notice that when hov ...

cssmenuinternet-explorerdrop-down-menudhtml

Adjusting the avatar size in Material UI to match the parent element's dimensions by styling the child elements to fill the entire space

Query on Dimension How does Material-UI determine the width and height of elements within the <Avatar/> component? Specific Scenario My specific issue revolves around the <AccountCircle/> icon, which you can find as an example here: account ...

cssmaterial-uijsx

Attempting to devise a jQuery algorithm sorting method

To enhance the answer provided in this post: How to stack divs without spaces and maintain order on smaller screens using Bootstrap I've been exploring ways to develop a jQuery script that dynamically adjusts the margin-top of div elements based on t ...

javascriptjqueryhtmlcsscss-float

Effective ways to position images within a card alongside a changing title

I have a requirement for displaying multiple cards with dynamic titles fetched from the backend. The challenge is to align images in a row regardless of the title length, ensuring alignment based on the longest title. Below is an illustration of what I am ...

javascripthtmlcsssass

Neglecting images on Zoom

Looking to scale up the elements on an HTML page by 50%, without affecting the resolution of images. Despite trying zoom: 150% in CSS3, it ends up zooming pictures as well, resulting in blurry visuals. Is there a way to enlarge all HTML components while ...

htmlcss