Responsive media query for division block design

I am currently learning on Stackoverflow and new to the platform. Please forgive any errors I may make.

I have a WordPress theme that is already responsive. On one of my pages, I created 3 boxes with inline CSS to give them colorful backgrounds. One box floats to the right while the other 2 float to the left.

Please take a look at the page and specifically at the 2nd box here: About Us

However, when viewing the site from a mobile device, I noticed that the 2nd box is floating to the right and goes off-screen. I tried adjusting things in media queries but wasn't successful. I initially set the 2nd block like this: 

<div id="image2" style=".....;float:right;">

What I want now is to set it to float:none in the media query.

Could someone guide me on how to achieve this? What is the correct hierarchy that needs to be placed inside the media query (which is located in a theme file)? I was able to make some changes to the logo using a media query by writing 

.header-wrapper .logo-wrapper {.....}

But I'm struggling to apply the same concept to this block of text.

Any help would be greatly appreciated. Thank you!

htmlcsswordpress

Answer №1

the width of your image2 remains constant regardless of the device size

@media (max-width:767px){
/* consider this */
 #image2{
    width: 100%;
 }

}

A word of advice: STEER CLEAR OF INLINE STYLING...

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

Modifying body appearance using CSS

Can someone help me figure out why the background color isn't changing on my website? I'm not a fan of CSS so please go easy on me. App.css body { background-color: darkslategray; } App.js import { Box, ChakraProvider, Image } from "@c ...

cssreactjs

Unable to submit form using an anchor tag

After implementing a new GUI style in our app, we decided to update how form submit links are structured. Our original method looked like this: <input type=submit class="some-style" name="Command" value="Save" /> Now, we're trying out a differ ...

jqueryhtmlforms

A prompt box in Internet Explorer using the InternetExplorer.Application in PowerShell

I'm having trouble adding a value to the pop-up window. Here is the code: <!DOCTYPE html> <html> <body> <h2>PS Prompt test</h2> <button onclick="Function()" id="test">send value</button> <p id="demo"&g ...

javascripthtmlpowershell

Creating a default menu within a specific route in Ember.js is a crucial step in

I have created a JSBin code for my Ember.js application which can be found here: When I click on Item A, I want the ABCD menu on the left to remain visible and not disappear. Thank you. ...

javascriptjquerycssember.js

modifying the identification value in HTML and then reverting it

Although this may seem like messy code, I'm really in need of assistance with a problem that has stumped me. Currently, I am working on an E-shop project where I have modals for displaying products. Within these modals, there is a button that allows u ...

javascripthtml

"Implementing a form submission feature in React.js that dynamically applies a class to the result element

I recently developed a basic BMI calculator using React.js. I am now attempting to implement a feature where if the calculated BMI result falls outside the range of a healthy BMI, the result text will be displayed in red color (I am utilizing styled-compon ...

cssreactjsstyled-componentsclassnameclass-names

Exploring methods to detect when a PHP page has been printed using the 'ctrl+p' shortcut and then subsequently updating

Hey there! I'm currently managing a php website that functions as an accounting system. Within this system, there are receipts, invoices, and other forms of documentation in use. However, I've encountered a problem with the main table in my myS ...

javascriptphphtmlmysqlcss

Tips for making sure custom fonts are loaded before running any JavaScript code

Upon loading my page, I run a JavaScript function to determine if specific text fits within its parent div. If it doesn't fit, then adjustments must be made. The text is styled with a custom font, which can be loaded either through @font-face or Goog ...

javascriptcssfonts

Angular allows for the dynamic updating of og meta tags

Sharing dynamic content on WhatsApp has been made possible through an API. By utilizing the angular Meta class in my component.ts file, I am able to dynamically update the default meta tag property in index.html with the latest content. ...

htmlangulartypescriptmeta-tagsog-meta

Footer panel in Bootstrap not aligning to the bottom of the page

I'm experiencing an issue with my footer getting stuck in the middle of the page. Strangely, this problem only occurs on one specific page, and not on any other pages. I've tried various methods to fix it, but none of them have been successful. ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Steps for embedding JavaScript code within HTML tags using a JavaScript file

Working on a React web app, I am solely using js and css files without any html. In one of my js files, there is a mix of html and js code like this: class Teams extends Component { state = { teams: [] } componentDidMount() { ...

javascripthtmlreactjs

Position an element in CSS relative to two other elements

Can an element be positioned horizontally in relation to one element and vertically to another using only CSS? I am attempting to include a dropdown menu in my navbar. However, the submenu is not aligning correctly. I want to position element A so that its ...

htmlcss

In Firefox mobile, a fixed positioned element will move with the page until the scrolling comes to a halt

I am facing an issue with a CSS element set to position: fixed. While it works perfectly on desktop browsers, it behaves poorly on mobile browsers, especially Firefox. The main problem is that the fixed element scrolls along with the page and then abrupt ...

javascriptjqueryhtmlcssfirefox

Launching a Bootstrap modal in Portrait mode through JavaScript

Is there a way to trigger the opening of a modal when the screen is in "Portrait" orientation and hide it when the screen is in "Landscape" orientation? I have tried implementing this functionality, but it seems to not work properly when the page initiall ...

javascripthtmlbootstrap-4model

Tips for implementing simple custom styling within an Angular application without relying on innerHTML

Seeking advice on the best practices for a specific scenario. I am currently developing a small Angular application where users can input text. I would like to allow them to easily make certain words bold or create links. For example, if they type *whatev ...

htmlangular

Is it possible to find a program that can extract information from a Hotmail webpage, such as the number of unread messages?

Does anyone know of a script that can be used to extract simple data from the hotmail/live mail web page? It doesn't matter what programming language it's in, but it would be best if it can run on Linux. This is because hotmail doesn't offer ...

htmlscriptingemaillivehotmail

An Animated Way to Shut Modal Window

Below is the code snippet used to trigger the modal: <div className={classes.modal}>{props.children}</div> .modal { width: 90%; background-color: white; z-index: 30; position: fixed; top: 20vh; left: 5%; border-radius: 12p ...

cssreactjs

Ways to display object that includes dictionaries on jinja2 templates?

Imagine if our lists were structured as follows: a1=[ ], a2=[ ], a3=[{'car':'bez','city':'la','aero':'vaar'}], a4=[ ], a5=[{'car':'tez','city':'pa','ae ...

pythonhtmlpython-3.xtemplatesjinja2

Creating Unique Designs with Multiple Shapes and Elements using Clipping Masks

I have a design piece to create that I initially built using three separate square div containers with independent background images. However, this method feels rigid to me as it requires chopping up and restaging a new image each time it needs to be chang ...

javascripthtmlcssmaskingimage-clipping

Adaptive text sizing within Microsoft Outlook

I am facing a challenge in making the font size of my email signature responsive. Although VW seems to be the solution, it doesn't seem to work in Outlook. I have attempted using CSS, but it appears that inline CSS might be necessary. However, I am un ...

htmlcssoutlookinline