Initial Row Defense Against Full Screen Websites

I am in the process of creating a webpage that spans 100% width using the foundation framework. Everything is going smoothly until I encounter an issue when trying to include a "div class="row" container.

My goal is to have two images side by side, occupying 8 columns and 4 columns respectively. These images should not have any padding on either side and should cover the entire screen. To achieve this, I have implemented the following code:

<div class="row collapse fullwidth">
    <div class="large-8 medium-12 relative columns">
        <a href="#" class="darken"><img src="img/r3gamersHome.png"/>
            <div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
               <h2 class="brighten">Portfolio</h2>
            </div>
        </a>
    </div>
    <div class="large-4 medium-12 relative columns">
         <a href="#" class="darken"><img src="img/r3gamersHome.png"/>
            <div class="large-12 large-centered medium-12 medium-centered small-12 small-centered caption">
                <h2 class="brighten">Portfolio</h2>
            </div>
         </a> 
    </div>
  </div>

This setup functions almost as expected, but it appears that the "row" element creates empty columns on the left and right sides of the page. I want to avoid this extra space. Yet, I cannot remove the padding by collapsing the columns without using the "row" class. It seems to be a trade-off between the two. I have tried various solutions like forcing full-width with additional code, but none of them have worked for me. Thus, I am open to alternative suggestions.

.fullwidth {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   max-width: 100%;
}

Any assistance would be greatly appreciated. Thank you!

Answer №1

After experimenting with it on Codepen (here), it seems that your CSS is not successfully overriding the Foundation CSS for the .row class.

max-width: 100% !important;

Instead of

max-width: 100%;

This solution worked for me. If you want the row divs to consistently behave like this, consider adjusting your existing Foundation CSS.

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

Transfer data to S3 directly from memory instead of saving it as a file first

I need to convert a string into a CSV format and upload it directly to my S3 bucket without writing it into a file. Is there a way to achieve this using memory streams? Instead of reading from a file, I want to create a stream with the string content itse ...

Updating Information Using JQuery

In my view, there is a partial view that displays details of open IT Tickets. Clicking on an open ticket loads the partial view with ticket details and comments using JQuery/Ajax. However, I'm facing an issue where if a new comment is added to a tick ...

Tips for transferring variables to my callback function or something similar

I'm facing a challenge with passing the markersArray to the callback function in order to push the results into the relevant array. The issue arises when trying to request nearby amenities for each filter and store them in separate arrays as per the c ...

Steps to retrieve the latest value of a specific cell within the Material UI Data Grid

After updating the cell within the data grid, I encountered an issue where I could retrieve the ID and field using the prop selectedCellParams, but retrieving the modified value was proving to be challenging. In order to successfully execute the PUT reque ...

This particular JavaScript function is only designed to operate on the initial input box in the provided

I have a question regarding echoing rows of $data inside input boxes. I am using a JavaScript function that is supposed to copy the input value to the clipboard when the input box is clicked. However, I am encountering an issue - the function only works ...

How can I prevent StateHasChanged() from affecting all open browsers in a Blazor Server-Side application?

Hey there, I'm new to Blazor but familiar with C#. This is my first time asking a question here so please bear with me. :) I am working on a Blazor server-side application where users can enter information and validate it based on server data. So far ...

The grid flex end is behaving differently than I anticipated

I am struggling to align two buttons vertically on the right side. Here is my code snippet: const WalletsContainer = () => { return ( <Grid style={{ background: 'red' }} direction={'column'} alignItems={'flex-end'} ...

Collection of clickable images that lead to creatively designed individual pages

Being relatively new to JavaScript and jQuery, my knowledge is solid when it comes to HTML & CSS. Currently, I have a page with 20 minimized pictures (with plans to increase to 500+ images) that open into a new page when clicked. Although I have no issues ...

Arrange multiple elements in a column using the flexbox `justify-content` property

I have a div containing h1 and h2 tags. My objective is to center them both horizontally and vertically using flexbox. However, my current code aligns them diagonally like this: -------------- | | | h1h2 | | | --------- ...

Determining the HTTP method dynamically with Vue Resource

I am trying to dynamically determine the appropriate HTTP method and make a single API call. However, I keep running into an exception when I attempt to call the method. Instead of assuming it's a bug with vue-resource, I believe I may be making a mi ...

Preventing page refresh with Javascript when clicking on CAPTCHA

I have been exploring a CAPTCHA tutorial on TutsPlus.com and I am facing an issue where the 'Incorrect Captcha message' keeps appearing, indicating that my user input through $_POST does not match the stored $_SESSION string. Upon investigating ...

How can I implement a toggle button to display additional details for a specific row within a table created using React.js?

I'm currently working on a project using Next.js and have come across an unexpected issue. Upon reading a JSON file, I populate a table with the data retrieved from it. Each piece of information in the table has hidden details that should only be reve ...

Identify a request in NodeJS without relying on express or accessing the request object independently of an express middleware

I am struggling with accessing the request object outside of an express middleware in NodeJS. In my code snippet below, I need to read the request object from a file called mongoose_models.js, where I don't have access to the express middleware argume ...

Trouble Logging In: Twitter's Authentication Failure Message

When attempting to update or post a status on Twitter using Ionic, I encounter an issue. The OAuth authentication works successfully for retrieving the UserProfile Api. However, when trying to post an image or status, an error is displayed ("Could not au ...

A step-by-step guide on showcasing Flickr images through API using a Justified Gallery

I am looking to integrate the Miromannino Justified Gallery () into my project, but I want it to showcase images fetched from Flickr. I have successfully implemented the code to retrieve photos from Flickr using the API through Ajax: $.ajax({ url ...

Error messages triggered by automatic post back in dropdown lists

When my page loads, the dropdownlist populates with items from the database. What I am trying to achieve is to display certain output whenever a user selects an item from the dropdownlist. Items in the database: a b c Setting autopostback=true on the ...

Subsequent calls to React's setState with an array are causing duplicate items to be appended twice

While developing a simple Twitter clone using React, I encountered a strange issue when adding a new tweet. Currently, I store a tweets array locally using the useState hook and employ setState to insert the new tweet into the array. Initially, everything ...

Align an image with text using CSS and HTML

I'm having trouble with my CSS and HTML code. I want to align the text to the right of an image in a grid format, but it keeps appearing below the image instead. Here is the code snippet: <html> <head> <style type="text/css"> #conta ...

jQuery radio button for mobile devices

I'm currently working on a web application using jQuery 1.9.1 and jQuery Mobile 1.3.2. One issue I'm facing involves horizontal radio buttons that display an icon: data-icon="radio-on". These radio buttons are dynamically added to the DOM. Her ...

Allow React to complete one loop (including setState) before starting another loop

handleSubmit = () => { this.setState({ modalState: false }) this.state.codeToClass.forEach((code, classId, map) => { const cr = _.find(this.state.classRoles, { id: classId }) if (code === cr.classCode) { console.log(&apo ...