Bony Scaffold - halting the motion of specific components

Currently, I am utilizing skeleton to create a fluid layout, which is functioning effectively for the most part. However, I have encountered an issue specifically with the 2 column layout on Magento at this URL:

In this setup, the navigation on the left sidebar is configured to 3 columns, while the main content area on the right is set to span across 12 columns.

The problem arises when the page width is reduced - the right hand side suddenly drops below, causing the left sidebar to expand excessively in order to compensate, resulting in a less visually appealing appearance.

I attempted to address this by applying CSS max-width: 160px; to the left sidebar, which improved the situation but did not completely resolve it. Ideally, I would like the right hand column to remain in place without dropping down, while still maintaining its fluidity and content.

Should I pursue a method to ensure that the right hand column remains fixed in position, or would removing skeleton from this particular section and converting it into static content be a more suitable approach?

htmlcssmagentoskeleton-css-boilerplate

Answer №1

If you're aiming for a fluid layout, my suggestion is to utilize the width property in percentages for smaller screens. In the provided code snippet, all widths are specified in pixels within media queries.

@media only screen and (max-width: 767px) and (min-width: 480px){
    .container {
        width: 420px;
     }
}

The CSS styling above targets the div with the class of container in skeleton.css. When the viewport width decreases below 767px, the main container's width adjusts to 420px. However, the left sidebar and product listing div (right section or primary content area) also have fixed pixel-based widths, causing the right section to drop beneath as there's insufficient space for them to align beside each other.

@media only screen and (max-width: 767px) and (min-width: 480px){
        .container {
            width: 90%;
         }
        .container .sidebar.three.columns{
            max-width: 20%;
         }
         .container .twelve.columns{
             width:75%;
             padding-right:0;
         }
    }

Experiment with the above CSS rules to observe how the divs behave fluidly upon window resizing due to the utilization of percentage-based widths. Feel free to apply percentage widths for various screen sizes within your media queries as well.

I trust this information aids you in some capacity.

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

The clickable functionality of buttons and text labels in Vue is currently not working

When I try to input text into the registration page in vue, nothing happens when I click the register/login button. However, if I press TAB and then enter my password followed by another TAB and ENTER, it works. This is the code snippet for the login-box: ...

cssjsonvue.js

Error with setting innerHTML property of a null nested div

This issue arises when the element is referenced before the DOM has completely loaded. To combat this, I have ensured that the necessary script runs only after the window has finished loading. Interestingly, if the getElementById() call is for a standalon ...

javascripthtml

Using Rails to reference an image in CSS

My application on Heroku, built with Rails, features a striking image as the background on the landing page. Since Heroku's file system is read-only, I made the decision to store these images (selected randomly) on AWS S3. In my .css(.scss) code, the ...

cssruby-on-railsrubyamazon-s3sass

Launching a modal in a new browser window with the help of JavaScript or PHP

I need to implement a feature where clicking a link opens a modal in a new tab and redirects the current page to a different link, similar to how retailmenot handles coupons. Here is the code snippet I am currently working with: <div onClick="myFunctio ...

javascriptphpjqueryhtmlcodeigniter

Perform validation on input by monitoring checkbox changes in Angular 4

I am currently working on a project where I need to loop through an array of key values in order to create a list of checkboxes, each accompanied by a disabled input field as a sibling. The requirement is that upon checking a checkbox, the corresponding in ...

javascripthtmlangularangular-formsangular-validation

Is it time to ditch Internet Explorer for EDGE?

Have you ever noticed that when attempting to access the stackoverflow website on Internet Explorer, the tab mysteriously closes and Microsoft Edge opens with stackoverflow loaded? What is the secret behind this strange phenomenon on stackoverflow's ...

javascripthtml

What is the best way to extend the width of an element within a Bootstrap column beyond the column itself?

Apologies for any language errors, but I have a query regarding Bootstrap. I am currently working on making a website responsive and I have a row with 4 columns set up like this: The "seeMore" div is initially hidden and on clicking the boxToggle element ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the reason that setting margin to 0 auto centers an element, while using margin 1 auto does not have the same effect?

When using margin: 0 auto;, it means that there is a margin size of 0 on the top and bottom of the element, with the available space being divided equally for the left and right margins. This behavior works as expected in the example below. In contrast, c ...

css

What is the best way to extract the body content from a Markdown file that includes Frontmatter

How can I retrieve the content of the body from my markdown file using front matter? Currently, it is displaying as undefined. What steps should I take to fix this issue? {latest.map(({ url, frontmatter }) => ( <PostCard url={url} content={frontmat ...

javascripthtmlreactjsastrojs

Is there a way to eliminate the border of an image attribute pulled from an input field?

Seeking assistance with a persistent issue I'm facing. I have an input for an image and a script to display the selected image. However, when the input is empty, a frustrating black border appears around the image attribute. How can I remove this bord ...

javascripthtml

CSS selector targeting an element based on the value of its table border

Is there a way to target a table on a webpage using a CSS selector? The table structure looks like this: <table border="1" width="560" cellspacing="0"> <tr> <td height="28" colspan="3" bgcolor="#FFFFF...> </tr> </table ...

jquerycsscss-selectorsjquery-selectors

The JQuery library in Mygento seems to be malfunctioning and not working

I am looking to implement Jquery UI on my Magento website and have installed Mygento JQuery, which includes the jQuery UI module. However, I am encountering an error stating jQuery is not defined. Can someone guide me on how to properly utilize the Mygent ...

jqueryjquery-uimagento

Balanced Columns with Background Extending Beyond Half of the Page

If you're looking for the final code, it can be found here: http://jsfiddle.net/asaxdq6p/6/ I am attempting to create an effect similar to this image: To achieve this, I am using the Equal Height Columns with Cross-Browser CSS trick as described in ...

htmlcssbackgroundfluid-layout

Jquery not functioning properly for show and hide feature

I'm new to using Jquery and JqueryUI. I have a div named front, which I want to initially display on window load and then hide it by sliding after a delay of 5500 milliseconds. However, I'm encountering errors in the jquery.min.js file. The HTML ...

javascriptjqueryhtmlcssjquery-ui

Run various CSS animations repeatedly

I recently created a captivating text fade-in, fade-out animation consisting of four lines. Each line elegantly appears one after the other, creating a mesmerizing effect. However, there's now a request to have these animations run in an infinite loop ...

csscss-animations

Tips for showcasing beautifully formatted XML content on a webpage

I have some XML data that I want to display on my website, but I'd prefer to show it in a styled format like a bootstrap table. However, I'm not sure how to go about doing this. Here's an example of the XML: <?xml version="1.0" encoding ...

htmlcssxml

Guide on aligning a child div directly beneath its parent without specifying the parent's height

I want to position a div beneath its parent in a way that mimics a menu opening below it. Currently, I attempted using right and top, but the child div ends up overlapping the parent. If the parent had a defined height (rather than top: 0 as shown below), ...

htmlcss

Tips on updating arrow button icon when clicked using jquery

I am currently working on a project where I have a button icon that I want to change upon clicking it. I am using the following jQuery code: <script> $('div[id^="module-tab-"]').click(function(){ $(this).next('.hi').sl ...

javascriptjqueryhtmlcss

Is there a way to ensure that the div of my template spans 100% in width and height?

I'm attempting to make my div 100% in size but I am having trouble achieving it. Here is my code: <template> <div> <Navbar/> <Calendar/> </div> </template> <script setup> import Calendar from &apos ...

cssvue.js

Incorporate real-time calculations using JavaScript (jQuery) with variables including initialization in HTML code

As a newcomer to JavaScript, I am encountering an issue that I need help with: I would like to convert the value in the number box into the answer next to it without any changes to the value. This should also include the variables NP0, NP1, and DP0 from t ...

javascriptjqueryhtmlvariableslive