Table of Contents
Code optimization
Things to note
Summarize
Home Web Front-end HTML Tutorial Solve the problem that the mobile Media Query does not take effect

Solve the problem that the mobile Media Query does not take effect

Aug 16, 2025 pm 09:24 PM

Solve the problem that the mobile Media Query does not take effect

This article aims to solve the problem that Banner on the mobile Media Query does not take effect on the WordPress website homepage. By analyzing the CSS code, find out why the `display` property of the `.mobile-img` element was not modified correctly, and provide a modified code example. At the same time, it is also shown how to merge Media Query with the same breakpoints to improve the readability and maintenance of the code. ### In the original code of problem analysis, although Media Query was set for screen sizes less than 768px, the display attribute of the `.mobile-img` element was not modified. Therefore, the element remains in the state of `display: none;` on the mobile side, causing the Banner to be unable to display on the mobile device. ### Solution To solve this problem, you need to add style rules for the `.mobile-img` element in Media Query, set its `display` property to `block`, and set the `display` property of the `.desktop-img` element to `none`. The following is a modified CSS code example: ```css @media screen and (max-width: 768px) { .homepage-header-section-image { margin-left: 0; } .homepage-header-section-content { left: 0; position: relative; width: 100%; display: block; } .desktop-img { display: none; } .mobile-img { display: block; } }

The purpose of this code is: when the screen width is less than or equal to 768px, the .desktop-img element will be hidden, and the .mobile-img element will be displayed.

Code optimization

There are two Media Query in the original code with the same breakpoints, which can be merged into one to improve the readability and maintenance of the code.

Here is a merged CSS code example:

 @media screen and (max-width: 768px) {
  .homepage-header-section-image {
    margin-left: 0;
  }

  .homepage-header-section-content {
    left: 0;
    position: relative;
    width: 100%;
    display: block;
  }

  .desktop-img {
    display: none;
  }

  .mobile-img {
    display: block;
  }
}

Things to note

  • Make sure that the CSS code is loaded correctly into the WordPress site.
  • Clear the browser cache to ensure the latest CSS code is loaded.
  • Check whether the class names of the .desktop-img and .mobile-img elements in the HTML code are correct.

Summarize

By modifying the display attribute of the .mobile-img element in Media Query and merging Media Query with the same breakpoint, the problem that Banner on the homepage of WordPress website is not displayed on the mobile side can be solved. In actual applications, be sure to adjust the code according to the specific situation and conduct sufficient testing to ensure that the Banner can be displayed normally on various mobile devices.

The above is the detailed content of Solve the problem that the mobile Media Query does not take effect. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress AI Tool

Undress images for free

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

PHP Tutorial
1511
276
The `` vs. `` in HTML The `` vs. `` in HTML Jul 19, 2025 am 12:41 AM

It is a block-level element, used to divide large block content areas; it is an inline element, suitable for wrapping small segments of text or content fragments. The specific differences are as follows: 1. Exclusively occupy a row, width and height, inner and outer margins can be set, which are often used in layout structures such as headers, sidebars, etc.; 2. Do not wrap lines, only occupy the content width, and are used for local style control such as discoloration, bolding, etc.; 3. In terms of usage scenarios, it is suitable for the layout and structure organization of the overall area, and is used for small-scale style adjustments that do not affect the overall layout; 4. When nesting, it can contain any elements, and block-level elements should not be nested inside.

Preloading Resources with HTML `link rel='preload'` Preloading Resources with HTML `link rel='preload'` Jul 19, 2025 am 12:54 AM

linkrel="preload" is a technology that optimizes page loading performance and is used to load critical resources in advance. Its core purpose is to prioritize loading of resources that are critical to home screen rendering, such as fonts, key CSS/JS and home screen images. Pay attention to when using: 1. Set the as attribute correctly to specify the resource type; 2. Avoid abuse and prevent excessive bandwidth usage; 3. Ensure that the resources will be actually used, otherwise it will cause waste of requests; 4. Add crossorigin attribute to cross-domain resources. Incorrect writing method such as the lack of the as attribute will cause the preload to be invalid. Rational use can improve page loading efficiency, otherwise it may be counterproductive.

Essential HTML Tags for Beginners Essential HTML Tags for Beginners Jul 27, 2025 am 03:45 AM

To get started with HTML quickly, you only need to master a few basic tags to build a web skeleton. 1. The page structure is essential, and, which is the root element, contains meta information, and is the content display area. 2. Use the title. The higher the level, the smaller the number. Use tags to segment the text to avoid skipping the level. 3. The link uses tags and matches the href attributes, and the image uses tags and contains src and alt attributes. 4. The list is divided into unordered lists and ordered lists. Each entry is represented and must be nested in the list. 5. Beginners don’t have to force memorize all tags. It is more efficient to write and check them while you are writing. Master the structure, text, links, pictures and lists to create basic web pages.

Shadow DOM Concepts and HTML Integration Shadow DOM Concepts and HTML Integration Jul 24, 2025 am 01:39 AM

ShadowDOM is a technology used in web component technology to create isolated DOM subtrees. 1. It allows the mount of an independent DOM structure on ordinary HTML elements, with its own styles and behaviors, and does not affect the main document; 2. Created through JavaScript, such as using the attachShadow method and setting the mode to open; 3. When used in combination with HTML, it has three major features: clear structure, style isolation and content projection (slot); 4. Notes include complex debugging, style scope control, performance overhead and framework compatibility issues. In short, ShadowDOM provides native encapsulation capabilities for building reusable and non-polluting UI components.

Can you put a  tag inside another  tag? Can you put a tag inside another tag? Jul 27, 2025 am 04:15 AM

❌Youcannotnesttagsinsideanothertagbecauseit’sinvalidHTML;browsersautomaticallyclosethefirstbeforeopeningthenext,resultinginseparateparagraphs.✅Instead,useinlineelementslike,,orforstylingwithinaparagraph,orblockcontainerslikeortogroupmultipleparagraph

HTML `style` Tag: Inline vs. Internal CSS HTML `style` Tag: Inline vs. Internal CSS Jul 26, 2025 am 07:23 AM

The style placement method needs to be selected according to the scene. 1. Inline is suitable for temporary modification of single elements or dynamic JS control, such as the button color changes with operation; 2. Internal CSS is suitable for projects with few pages and simple structure, which is convenient for centralized management of styles, such as basic style settings of login pages; 3. Priority is given to reuse, maintenance and performance, and it is better to split external link CSS files for large projects.

What is the name attribute in an input tag for? What is the name attribute in an input tag for? Jul 27, 2025 am 04:14 AM

Thenameattributeinaninputtagisusedtoidentifytheinputwhentheformissubmitted;itservesasthekeyinthekey-valuepairsenttotheserver,wheretheuser'sinputisthevalue.1.Whenaformissubmitted,thenameattributebecomesthekeyandtheinputvaluebecomesthevalueinthedatasen

Using the HTML `download` Attribute for Links Using the HTML `download` Attribute for Links Jul 17, 2025 am 03:57 AM

TheHTMLdownloadattributeallowsuserstodownloadfilesdirectlyfromalinkbyusingthetag.Toimplementit,adddownloadtotheanchortag,suchasDownloadPDF,orspecifyacustomfilenamelikeDownloadasmy-document.pdf.1.Itworksbestwithsame-originURLsandcommonfiletypeslikePDF

See all articles