The HTML content is not responsive to varying screen sizes

Currently, I am in the process of developing a Wordpress page using WPBakery Page Builder. To enhance the design, I extracted some HTML/CSS code from an existing page by using SnappySnippet and pasted it into the new page within a "Pure html" block. However, I have encountered an issue where the content does not adjust properly on all screen sizes. It only works correctly on my computer when it is in fullscreen mode, appearing messy on other screens.

Below is the HTML code:

<div id="DIV_1">
...
</div>

And here is the CSS code:

#DIV_1 {
    max-width:100%;
    ...
}/*#DIV_1*/

#DIV_2 {
    ...
}/*#DIV_2*/
...

#DIV_36 {
    ...
}/*#DIV_36*/

I have tried various solutions to fix this issue but without much success. If anyone has any insights or suggestions, I would greatly appreciate your help.

Here is how the content looks in fullscreen view:

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

And this is how it appears when the browser window is resized to half screen:

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

Answer №1

Replace margin: 0px 265px with margin: 0px auto in your CSS file. It's important to focus on making sure your website is responsive, and this adjustment will be a good starting point.

Answer №2

Implement media queries in your CSS stylesheet and link them to your HTML document

@media only screen and(min-width: 768px) {
}

This is the standard format for using media queries in CSS. In the min-width section, specify the desired screen sizes for responsive design. To get guidance on common screen sizes, use developer tools in web browsers and activate the responsive dimensions feature to view typical viewport sizes.

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

Adding fewer components to your current Angular 5 project

I have a JS Fiddle showcasing a CSS chart. How can I integrate LESS into my current Angular 5 project to make use of this chart? Also, where should I place the JavaScript and references to the LESS file from this example within my Angular component? The li ...

Different ways to automatically trigger a function in JavaScript

There are various ways to trigger a function automatically in javascript when a page loads. I am interested in knowing which method is considered the most effective and reliable. If you have a unique approach that differs from others, please share it here ...

Adjust the filter settings in angularJS

I am working on a request page with three buttons: Open, Close, and All. Currently, when the page is opened, it displays the 'All' requests by default. However, I want to change this to show the 'Open' requests instead. I want users to ...

Ways to ensure a ul li element perfectly fits inside a div element without any spaces

As a newcomer to CSS and HTML, I'm facing an issue with my ul li dropdown menu and login boxes. The background colors are red and blue, but there are gaps within the div that I want to fill with the height of the div. Below is the code snippet: @key ...

Getting rid of the arrow icons in a Material UI TextField

I am facing a challenge with removing the up and down arrow icons from a Material UI TextField that I adjusted using the Material UI documentation (https://material-ui.com/components/autocomplete/#autocomplete) Highlights section. After trying various sol ...

Switching between play and pause for the video element using a component for the child

Trying to toggle the play/pause of a child video by clicking on a parent div can be challenging, especially when dealing with multiple instances of the same div and video. A normal function may only work for one specific video, as mentioned by @ken. I hav ...

I am looking for JavaScript or jQuery code that allows me to incorporate a "Save This Page As" button

Is there a way to enhance the saving process for users visiting an HTML page, rather than requiring them to go through File > Save As? I am interested in implementing a "Save Page As" button on the page that would trigger the save as dialog when clicke ...

How to Style Background with CSS on the Server-Side? (Including Links and Hover Effects)

I'm facing a dilemma in choosing between an ASP.NET control and an HTML element for creating a button with a CSS-defined background that changes on hover... 1. Initially, it seems the ASP.NET ImageButton control is not suitable for this purpose becau ...

An exception known as NullPointerException arises when attempting to invoke JDBC within a servlet

While running my RegistrationServlet, I encountered an issue when trying to create a Database object. Below is the servlet code snippet: @WebServlet("/register") public class RegistrationServlet extends HttpServlet { private static final long serial ...

Using Jquery to allow users to dynamically add <a href> links to localstorage

In the context of a work project, there is a bookmark page with internal links already set up. However, I am looking to allow users to add custom bookmarks with their own URLs dynamically and save them via local storage. This could potentially include an i ...

Change button to an ajax spinner when it is clicked using jQuery

$(".post-btn").html("<img src='../images/loader.gif' />"); Why isn't this code working? I know I have the correct selector because when I tried $(".post-btn").text('test'), it worked. I want the text of the button to change ...

Vintage webpage utilizing Bootstrap 3.3.4

I've been working on updating my old website that was built with Bootstrap 3.3.4 a few years ago. Recently, I made some minor changes to the content and everything was working fine just last week. However, when I checked the website today using XAMPP, ...

Fuzzy text in drop-down box on Chrome, clear on Firefox

I've encountered an issue with a dropdown menu in Google Chrome where the content appears blurry, while it displays correctly in Firefox. The problem arises when the dropdown exceeds a certain height, and I've tried setting a max-height with over ...

Different div elements are clashing with each other when it comes to hiding and

Having added multiple div elements with different IDs, I am facing an issue where clicking one div displays it while hiding the others. I am looking for a solution to prevent conflicts between the divs. Any suggestions on what might be causing this problem ...

Transmitting information compiled into an array format using AJAX and JQuery

I'm seeking assistance with sending my data efficiently. Previously, the script I developed served as a Mass Acknowledgments Tool for Nagios, drawing inspiration from components available for NagiosXI. Initially, the data processing and sending were ...

How can you use a jQuery Selector to target all images and sources within dynamic containers?

I am currently attempting to identify all images and their paths (srcs) within the dynamic containers. The dynamic containers refer to container patterns stored in an array, which is filled dynamically. For example: var containers = new Array( ...

Displaying NodeJS error messages directly in the main HTML file

After creating a form using NodeJs and implementing input validations that display errors when users enter incorrect values, I encountered an issue where the errors appear on a new blank page instead of within the main HTML file itself with stylish formatt ...

What is the best way to send a JavaScript variable to PHP for storage in a WordPress database?

I am currently in the process of developing a star rating system within Wordpress and am looking to store the rating data in the Wordpress database. To achieve this, I have saved the star rating PHP code as a template within my Wordpress theme folder. Belo ...

Warning: The DataTables alert has been triggered for table ID DimStatus. It is indicating that an unknown parameter, 'Code', has been requested for row 0 and column 0 during the initialization

https://i.stack.imgur.com/yEpSp.pngI am encountering an error while attempting to display my data in a datatable. The structure of my table is as follows: [Table("DimStatus", Schema = "dmg")] public class PolicyState { [Key] ...

What is the best way to create and authenticate CakePHP users through Wordpress?

I am currently using CakePHP 2.x in conjunction with Wordpress 4.0. My goal is to automatically create Wordpress users whenever a user signs up in CakePHP. This means that when a user registers in CakePHP, their information should also be inserted into th ...