Fluid Grid System with columns of specific dimensions

Recently delving into the world of Foundation Framework, I've just begun utilizing it for my projects. My current task involves crafting a responsive design with the help of the Foundation Grid system.

Specifically, I've set up a grid layout for desktop screens with a 2x4 (rows, columns) configuration.

<div class="row">
<div class="large-12 columns">
  <div class="row">

    <div class="large-3 small-6 columns">
      <img src="http://placehold.it/250x250&text=Thumbnail" />
      <h6 class="panel">Description</h6>
    </div>

    <div class="large-3 small-6 columns">
      <img src="http://placehold.it/250x250&text=Thumbnail" />
      <h6 class="panel">Description</h6>
    </div>

    <div class="large-3 small-6 columns">
      <img src="http://placehold.it/250x250&text=Thumbnail" />
      <h6 class="panel">Description</h6>
    </div>

    <div class="large-3 small-6 columns">
      <img src="http://placehold.it/250x250&text=Thumbnail" />
      <h6 class="panel">Description</h6>
    </div>

<!-- End Thumbnails -->

  </div>     
</div>

My next challenge is achieving a two-column layout for tablets and a single column layout for mobile devices. While the grid normally adjusts columns to fit available space, I require fixed-size columns in this scenario.

One solution that comes to mind is dynamically modifying the DOM structure using @media queries and JavaScript. However, I'm seeking a more efficient approach, ideally involving CSS only.

Any insights or suggestions on this matter would be greatly appreciated.

javascriptcssgridresponsive-designzurb-foundation

Answer №1

For those utilizing Foundation 4.3 or later, there is an option to acquire a supplementary stylesheet that incorporates a medium grid alongside the existing small and large grids in use. This feature is currently classified as experimental, but it is expected to be included as a standard feature in Foundation 5 which is slated for release on November 21st.

Answer №2

To ensure that a div element remains fluid and responsive on different screen sizes, you can utilize the @media rule to specify maximum and minimum widths based on pixel values.

It is important to define specific widths for various devices...

For example:

@media screen and (max-width: 980px) {
  #your id {max-width:99%; min-width:75%;}
  .image class {width:975px; height:450px;}
}
@media screen and (max-width: 650px) {
  #your id {max-width:99%; min-width:75%;}
  .image class {width:648px; height:290px;}
}
@media screen and (max-width: 480px) {
  and so forth...
}
@media screen and (max-width: 320px) {
  and so forth...
}
media screen and (max-width: 240px) {
  finally...
}

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

Exploring various templates with AngularJS Directives

Let's delve into a slightly complex topic, but I'll simplify it as much as possible for you. There is a directive in play: .directive('configuratorRows', function () { return { restrict: 'A', scope: { ...

javascriptangularjs

What is the best way to incorporate arrow buttons on my website in order to unveil various sections on the homepage?

A colleague and I are collaborating on a website for his cookery business. He has sketched out some design ideas on paper, one of which involves having a homepage with 4 different sections stacked on top of each other. Each section would have an arrow butt ...

javascriptjqueryhtmlcss

Having difficulty choosing an element with protractor's virtual repeat functionality

Initially, I successfully used ng-repeat to select an element. However, the developers have since implemented virtual repeat which has caused the following code to stop working: expect(stores.listStores(0).getText()).toContain('Prahran'); expect ...

javascriptseleniumselenium-webdriverprotractorend-to-end

Async function is improperly updating the array state by overwriting it completely instead of just updating one item as

I am working on a file upload feature where each uploaded file should have a progress bar that updates as the file gets uploaded. I'm using a state to keep track of selected files and their respective progress: interface IFiles { file: File; c ...

javascriptreactjstypescriptnext.js

Looking for guidance on utilizing pushState and handling onpopstate events?

By using ajax, I am able to load specific page content without refreshing the entire page. In order to make the back button functionality work, I utilize pushState and onpopstate as shown below: function get_page(args){ .... $.ajax({ url ...

javascriptjqueryajax

Transform Promise-based code to use async/await

I'm attempting to rephrase this code using the async \ await syntax: public loadData(id: string): void { this.loadDataAsync() .then((data: any): void => { // Perform actions with data }) .catch((ex): v ...

javascripttypescript

Browser disregards backslashes in the content of pseudo elements

I have been struggling with a simple issue for quite some time now, and I seem to be out of ideas. The problem lies in the styling of a CSS pseudo-element before, which is defined as follows: #fPhone::before{ color: #78be20; content: "\e622" ...

htmlcsspseudo-element

The SyntaxError is triggered by the React-Native FlatList component

As a newcomer to React Native, I am facing an issue with refreshing the component to load city names stored in async storage. The error occurs when I utilize the FlatList component for the first time. The specific error message I encountered is: SyntaxE ...

javascriptandroidreactjsreact-native

Typescript: Verifying the type of an interface

In my code, I have a function called getUniqueId that can handle two different types of interfaces: ReadOnlyInfo and EditInfo. Depending on the type passed to this function, it will return a uniqueId from either interface: interface ReadOnlyInfo { item ...

javascripttypescriptinterface

Automatically navigate through form fields using jQuery when pasting data

Enhancing the form filling experience by allowing users to prepare a text file in advance and simply copy/paste it into the form for quick submission. Integration of a feature that automatically moves to the next input field when a tab or newline character ...

javascriptjqueryhtmlforms

Creating a Dynamic Dependent Dropdown with Jquery and Ajax in PHP

As a newbie in coding, I stumbled upon some valuable information to enhance my register form using Ajax. While the PHP files seem to be functioning correctly, I suspect that the JS file is not performing as expected. In the register form, you'll find ...

javascriptphpjquerymysqlajax

javascript issue with setting the id attribute on a select option

I can't seem to set the id attribute in my select element using JavaScript. When I inspect it, the id attribute isn't showing up... Here's the first method using JS: var selectorElem = document.getElementById('selector') var ...

javascripthtmlreactjsselect

The react-router-dom seems to be malfunctioning, so let's simply render the "/"

Struggling to render multiple pages in React, I am a newbie and have been exploring various tutorials and pages. My stack includes React, Webpack, Babel, and ESLint with Airbnb configuration. When I render my React app, it appears like this. View of the ...

javascriptreactjswebpackbabeljseslint-config-airbnb

I'm encountering a RangeError in nextjs when trying to pass props to a child component

I'm a beginner with Next.js. I've been attempting to pass props to a child component that is a response from an API call. However, every time I try to add the props in the child component, I encounter a RangeError: Maximum call stack size exceed ...

javascriptreactjsnext.js

What's the most effective method to incorporate additional events into this element using the conditional operator?

Looking for help with this code snippet: <span role="link" tabindex="0" :class="tabDetails.showPayment ? 'link' : ''" @click="tabDetails.showPayment ? cTab('payments') : null" ...

javascriptvue.js

Using a percentage in CSS translate can result in an image appearing blurry

I am facing a frustrating issue. Whenever I align an image using percentage-based transform translate, it results in a slight blur. This problem is specifically related to percentage alignment. Here is the CSS snippet: img { display: block; height: ...

htmlcsssass

Instruction on inserting NativeBase footer into my React Native application?

As someone new to React Native, I am trying to include a footer bar in my app. Below is the code snippet from my dashboard.js file where I attempted to add the footer bar, but it doesn't seem to be working as expected: import React, { memo } from &ap ...

javascriptandroidreactjsreact-nativenative-base

The sticky HTML table header feature is functional, however, the header's border disappears while scrolling

Utilizing the react-bootstrap-table2 library in my React project, I added custom CSS to create a sticky top row effect: .table-container { overflow-y: auto; max-height: 500px; } .react-bootstrap-table th { position: sticky; top: -1px; background- ...

htmlcssreactjs

Leveraging Ajax in Django to communicate with the backend and showcase the outcome

I need assistance with implementing ajax functionality to send user input to a Django backend for text processing, and then display the results. However, due to my limited experience with ajax, I'm struggling to figure out where I'm going wrong. ...

javascriptpythonajaxdjango

Identifier for md-radio-group

In my Angular 4 Material application, I have a set of radio buttons grouped together: <md-radio-group fxLayout fxLayoutAlign="center center" fxLayoutGap="30px"> <md-radio-button value="1">Date</md-radio-button> <md-radio-butto ...

htmlcssangularmaterial-designangular-material2