Divs that float and stack horizontally to completely fill their parent div, while also dynamically resizing based

I've been working on a metro tile slider, but I'm encountering some issues with its responsiveness.

Here is the progress I've made so far:

The main problem I'm facing is that the tiles do not align horizontally unless I enclose them in a div with a width of 1000px.

Furthermore, the tiles are not adjusting properly to different screen sizes. This could be due to the fixed pixel width I set for the enclosing div, but I suspect there may be other underlying factors contributing to this issue. Ideally, I would like the tiles to remain stacked horizontally and simply shrink when viewed on mobile devices.

I used the Tile Builder plugin in Wordpress to create these tiles. If you look at their example on a mobile device, you'll see that it scales down accordingly, which is the behavior I am aiming for:

I've spent quite some time tweaking the surrounding div, the widget area, and even the theme itself, but nothing has proven successful so far. Hopefully, someone else can lend me a fresh perspective and help me solve this challenge...

csswordpresspluginsresponsive-design

Answer №1

To ensure it adapts to different screen sizes, you'll need to set the width of each item as a percentage as shown in the following example:

http://jsfiddle.net/KAeak/2/

Only one wrapper was used in this case.

<div class="wrap">
    <div id="item-1">Example</div>
    <div id="item-2">Example</div>
    <div id="item-3">Example</div>
</div>

Answer №2

  1. In order to correct the issue with tiles not aligning in the center, you can either remove the display: table-cell; or add width: 1000px to the class .art-layout-cell in your style.css file at line 1480;

  2. To ensure that it is responsive, consider using percentage width for the tiles and/or incorporate @media screen queries similar to this example.

The usage of 

<meta name="viewport" content="width=device-width, initial-scale=1.0 />
as demonstrated in this instance causes everything on the site to shrink. A more effective approach to achieve responsiveness would be through the use of @media screen queries.

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

Need help speeding up website load times?

My website is loading incredibly slow, even though it has minimal content. I suspect that the high number of images and JavaScript elements on the page are contributing to this issue. Is there a method available to diagnose what exactly is causing the ext ...

javascriptjqueryhtmlcss

Synchronizing two navigation menus on a single-page application website

Let me start by saying that I specialize in back end development and am facing a specific challenge with building a website that includes two navigation menus. The main navigation menu features links like Home, while the sub-navigation menu includes option ...

javascriptjquerycssangularjstwitter-bootstrap

Transforming a triangular shape into a square using Plane Geometry in THREE.js

I have an animation created with triangles in the link below. Is there a way to convert these triangular areas into squares? The animation currently has a line running through the middle when using "PlaneGeometry". Removing this line would turn the triangl ...

javascriptjquerycssthree.js

My element is not being animated by Elementbyclass

Without Using JQUERY The animation I'm trying to create isn't functioning properly. I attempted to utilize document.getElementsByClassName, but it's not working as expected. There are no errors, but the element is not animating correctly. ...

javascripthtmlcssdom

Ways to have the right sidebar seamlessly blend in with the page content by hovering over it rather than occupying a separate area

While working on the design of my website, I encountered a challenge with the sidebar. I aim to have a sidebar that hovers from the right side to the left, displaying the full content when the cursor is placed over it, much like the one featured on . Altho ...

htmlcsslaraveltwitter-bootstrap

I am struggling to assign the height style attribute to a div element

I have created the code below where I am attempting to set a div to 'display: flex' and include two divisions, one with a width of 200px and the other with a width of 100%. <div style="clear:both;display:flex; height: 100%;"> <div ...

htmlcssflexbox

woocommerce_order_status_completed fails to activate

I've been struggling to create a custom plugin that performs a specific action after a WooCommerce order is completed, but I can't seem to make this hook function correctly. This seems to be a common issue as I have come across similar questions: ...

phpwordpresswoocommerce

Is there a way to conceal an image within the dropdown menu on a WordPress theme?

I am currently developing a custom WordPress theme with Bootstrap for a client. They are looking to have a website similar to this example, featuring a dropdown menu as the primary navigation. I need assistance in removing or hiding the images within the d ...

phpcsswordpresswordpress-theming

What are the steps to effectively cultivate an isometric rectangular box using HTML and CSS?

Starting at the top in isometric grids, like this, can be quite convenient: https://i.sstatic.net/YFh0SRmx.jpg The code below is used to create a "3d" isometric box: body { display: flex; justify-content: center; align-items: center; } .plane { ...

htmlcssmatrixcss-transformsisometric

What is the best way to monitor a link within the content of a WordPress post using Google Analytics?

Hello, I am looking to track the number of clicks on a link within a post using Google Analytics while users read the article. Is there a way to do this without relying on plugins? I tried adding the necessary tag in Google Tag Manager and modified the ...

phpwordpressgoogle-analytics

What could be the reason my div is not displaying correctly?

I am currently developing a game using HTML, CSS, and jQuery. The game will involve falling blocks that the player needs to avoid. However, I am facing an issue with my jQuery implementation. When selecting a theme (only the dark theme is currently functi ...

javascriptjqueryhtmlcss

Display the user's location on Google Maps in addition to all other markers for a comprehensive view

How can I modify the code to prompt the user for their location only when they click on a specific button, and then show all markers on the map? This jsfiddle illustrates the current issues: Google map loads markers from a database, and the user is asked b ...

javascriptjquerycssgoogle-mapsgoogle-maps-api-3

Ways to eliminate the yellow highlighting on a row

In my current application, I am incorporating jqGrid and aiming to apply custom styling to it. To start, my objective is to eliminate the yellow highlighting effect that appears when clicking on a row in the jqGrid css. Despite my attempts, I have been u ...

jquerycssjqgrid

CSS - Struggles with Keeping Div Positioned to the Right of Another

I'm facing a simple layout issue here - trying to align two divs next to each other. Image on the left, text on the right. However, when the text is too long, it pushes the div down instead of wrapping around. I want the cs-summary div to automaticall ...

csscss-float

What is the best way to showcase a blank div element using CSS?

Is there a way to make this empty div tag display without having to add &nbsp;? Can it be achieved using only CSS? <div class="bar bg-success" title="2015-07-23,5.0000" height="50%"></div> .bar { background: green; width: 5px; float ...

htmlcss

Ensure that all Woocommerce products have consistent height while allowing for variations in width

I am struggling with achieving consistent height for all the products on my website, while allowing for variable widths. I attempted to resolve this using UI, but unfortunately it was unsuccessful. Does anyone have suggestions on how to accomplish this u ...

htmlcsswordpresswoocommerce

Is the CSS hover feature not functioning properly because of the pseudo-elements?

After experimenting with SVG and CSS effects, I'm trying to achieve a similar style to the game "limbo". The grain and tiltshift effects are working as intended, but I'm having trouble triggering the hover behavior on SVG elements. What could be ...

csssvghoverpseudo-element

Aligning the block both vertically and horizontally

I've been trying to center a red block both horizontally and vertically like shown in the picture below, but it's not positioned correctly. I'm using Bootstrap 4. Can anyone point out what's wrong? https://i.sstatic.net/3ZGg6.png .p ...

htmltwitter-bootstrapcssbootstrap-4twitter-bootstrap-4

Modify border color of vuetify v-card upon clicking a button

How can I update the border color of the v-card element from vuetify when the user clicks the showError button associated with the limited-products id? I want the border color to change to red. Additionally, when the user clicks the removeError button, I ...

htmlcssvue.jsvuetify.js

What is the best way to create a centered vertical line with text in the middle?

I attempted to replicate a form that contains a vertical line <span class="vertical-line">or</span> with text centered in it! How can I create a similar appearance like this form? I considered using hr but it generates a horizontal ...

htmlcss