What are the steps for specifically editing the mobile version of a website?

I am currently gaining experience by working on a website, but I am facing some challenges in making changes specifically for the mobile version. Here is an example:

<h1 class="intro-header__title">
    <span>Are you ready to</span> Expand your horizon
</h1>

For CSS adjustments on the desktop version, I have made the following changes:

.intro-header__title {
    font-size: 2.6rem;
    font-weight: 700;
    margin-bottom: 15px;
}

Now, I want to hide a certain part on the mobile version:

<span>Are you ready to</span>

To achieve this, I attempted the following:

@media (min-width: 768px){
    .intro-header__title {
        display:none;
    }
}

@media (min-width: 960px){
    .intro-header__title {
        display:none;
    }
}

Unfortunately, this approach does not seem to be effective. I am encountering similar issues with text that appears compressed on the mobile version. I would like to modify the borders solely for the mobile version without affecting the desktop version. Here is an illustration of the current appearance (compressed text due to borders):

https://i.sstatic.net/KSjxR.png

htmlcss

Answer №1

If you want to style the mobile version of your website, make sure to include the media type in your @media query (for example, "screen"). Additionally, remember to use max-width instead of min-width for formatting purposes.

.intro-header__title {
  font-size: 2.6rem;
  font-weight: 700;
  margin-bottom: 15px;
}

/** styling for screens up to 768px width */
@media screen and (max-width: 768px) {
  .intro-header__title span {
    display:none;
  }
}

/** styling for screens up to 960px width */
@media screen and (max-width: 960px) {
  .intro-header__title span {
    display:none;
  }
}
<h1 class="intro-header__title">
  <span>Are you ready to</span> Expand your horizon
</h1>

Note: It is redundant to have two media queries that essentially do the same thing. In this case, you can remove the first media query (max-width: 768px) since the second one covers larger screens as well.

For reference, you can check out a comprehensive list of screen sizes for various devices on StackOverflow: Media Queries: How to target desktop, tablet and mobile?

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

I'm looking to add a next and previous button within my jumbotron- can anyone offer guidance?

As I near the completion of my Full Stack Nanodegree final project and await assistance from my instructor, I've taken on the task of developing my portfolio. However, I'm facing a challenge with implementing next and previous buttons within my j ...

javascripthtmlbootstrap-4

Take off the wrapping from the package

I need help with my code on how to remove the wrapper span tag without removing the text. <ul> <li> <a href="#"> </a> <ul> <li> <a href="#"> ...

jquerycss

Unable to see the tokens on the connect four board when using Javascript and HTML

I'm currently developing a game of connect four using javascript, html, and css. I'm encountering an issue with the refreshGrid() function in game.js. At the moment, when I run my html file, I only see an empty board. The function is meant to ena ...

javascripthtmlcssarraysfunction

How can I duplicate or extract all the formatting applied to a specific text selection in Ckeditor?

I am currently utilizing CKEditor version 3.6 within my Asp.net MVC 3 Application. One of my tasks involves creating a Paint format option similar to Google Docs. I am looking to integrate this feature into CKEditor. Is there a way in CKEditor to transfe ...

javascriptasp.netcssasp.net-mvcckeditor

Ways to transfer ID to a different HTML page

I have some Javascript code in a file named nextPage.js. When this code is executed by clicking on something, it should transfer the value of category_id to another page called reportlist.html. Can you please provide assistance with this? var base_url = " ...

javascriptjqueryhtmlajax

Preview images in the Image Carousel bullet lineup

I've created an awesome image carousel using HTML and CSS. The carousel includes three bullets at the bottom that display a preview image when hovered over. Currently, there is a transition effect as the picture slides up and down. Is there a way to m ...

htmlcss

Ways to customize the default CSS styles of angularJS for elements like search box and more

Looking for a way to customize the appearance of an AngularJs search box? <div ng-controller="PersonListCtrl"> <div class="bar">Search: <input ng-model="query"> </div> <ul cl ...

cssangularjs

I incorporated a YouTube video using the iframe tag, but encountered an issue where the page would not scroll up or down when the mouse cursor was positioned on the iframe

How would you like your HTML code to function? When the cursor is on the iframe, do you want it to play a video? Also, should the parent page scroll when you scroll? <section class="section section-padding"> <div class="container"> ...

csshtmlbootstrap-4

Adjusting the height of an element in AngularJS based on its width dynamically

I am working on a table that is generated using ng-repeat, and I want to ensure that each td in the tbody is square. Since all the tds have an equal width, I only need to adjust the first one. However, the size of the table and td will change when the wind ...

javascriptcssangularjs

Using the Match() function with an array of objects

I am working with an object array containing multiple variables. let Novels = []; class Novel { constructor(isbn, title, author, edition, publication, year) { this.isbn = isbn; this.title = title; this.author = author; this.publicat ...

javascripthtmlarraysstring

Shifting divs to different positions upon clicking

I am currently working on a project where I have three divs in a container positioned next to each other. My goal is to make them change their positions when clicked. For example, clicking on the left div should move it to the center position. Here is my p ...

javascripthtmljquerycssjquery-animate

Meteor JS failed to load the CSS file due to an unsupported MIME type

Currently, I am working on a meteor js 1.8 app. I have created a layout and now I want to add CSS to it. Here is the structure I am following: imports -ui --stylesheets --bootstrap.min.css --font-awesome.min.css --skins.css --forms.css All my CSS files ...

javascriptjquerycssnode.jsmeteor

The issue with Angular 2's Parameterised router link component not fully refreshing

I'm trying to figure out how to show a set of images when I click on a specific menu item. The menu structure looks like this: <ul id="demo23" class="collapse"> <li> <a [routerLink]="['image-gallery','Picasso ...

javascriptjquerycssangularfrontend

Choose specific nodes using the XPath query language

I need help with an HTML snippet: <td> <span class="x-cell">something</span> <span class="y-cell">something</span> <span class="z-cell">something</span> A text <span ...

htmlxpath-1.0

What is the best way to activate a JavaScript function once a page has finished loading?

Hey there! I have a webpage with 2 text input fields and a DIV element. The first input field is for user input, while the second one is readonly. When the user hits Enter in the first input field, a new page loads into the DIV based on the query result f ...

javascriptphphtml

Is there a way to align text in the middle while having different icons on each side?

Is there a way to center align the text in this image with minimal use of CSS/HTML? The icons on the left are causing it to be off center: https://i.sstatic.net/TKOYG.png Below is the relevant HTML and CSS for this top section: <div class="navbarhead ...

htmlcsstwitter-bootstrapflexbox

Creating a Select component in React without relying on the Material-UI library involves customizing a dropdown

Is there a way to achieve a material UI style Select component without using the material UI library in my project? I'm interested in moving the label to the top left corner when the Select is focused. export default function App({...props}) { retu ...

javascripthtmlcssmaterial-ui

What are the steps for submitting a form with AJAX?

I am having trouble submitting a form via ajax. I am not receiving any error messages even though I have set up error handling throughout the website. Here is my code: <script type="text/javascript" src="jquery.js"></script> <div id="shower ...

javascriptphpjqueryhtmlajax

Flask caches JSON files automatically

I am currently working on a visualization app using js and python. The functionality of my app is as follows: There is a textbox in the browser where I input an URL The URL is then sent to Python via Flask In Python, the URL is processed to create ...

javascriptpythonhtmljsoncaching

Is there a way to adjust the padding of html and body elements to 0 in Vue.js without interfering with the styling of bootstrap

In my Vuejs project, I am designing a bootstrap navbar that has left and right margin spacing, even though I have not added any body or html padding. When I navigate to the welcome.blade.php file and set the body and html padding to 0 as shown below: *{ ...

htmlcssvue.jspadding