Check out this website, when I resize to smaller screens, the layout changes:
I am trying to replace the second yellow block with the bottom block using Foundation's pull & push options but can't seem to get it right.
Do you have any suggestions on how I can achieve this?
It seems like you are looking to achieve a specific layout for the final product:
You mentioned that you want to change the order of the row from DEAD MAIN’S CACHE (Text), BENJAMIN (Portrait), and PROTECT YOUR NECK (Coffee Bean?).
To accomplish this, you should switch DEAD MAIN’S CACHE (Text) with PROTECT YOUR NECK (Coffee Bean?).
Also, make sure to eliminate any mentions of small and utilize push and pull to arrange the elements correctly for larger screens.
Your current code:
<div class="row">
<div class="small-12 small-push-12 large-4 columns">DEAD MAIN’S CACHE (Text)</div>
<div class="large-4 columns">BENJAMIN (Portrait)</div>
<div class="small-12 small-push-12 large-4 columns">PROTECT YOUR NECK (Coffee Bean?)</div>
</div>
My recommendation:
<div class="row">
<div class="large-4 large-push-8 columns">PROTECT YOUR NECK (Coffee Bean?)</div>
<div class="large-4 columns">BENJAMIN (Portrait)</div>
<div class="large-4 large-pull-8 columns">DEAD MAIN’S CACHE (Text)</div>
</div>
Essentially, focus on designing for mobile devices first and then adjust using push/pull for larger screens.
If my interpretation was off, please feel free to clarify your question.
I hope this guidance is helpful!
Check out the image here: . I'm struggling to understand the examples and live flex configurators. Are they only showing simple examples, or am I just not grasping it? Is it possible for me to use media queries to hide a4 when the screen is less than ...
Currently, I am utilizing a <p> tag as a submit button/area by setting a specific id in jquery. <p id="xyz"></p> My requirement is to insert an input field inside this <p> tag to include a particular value that will be submitted u ...
Currently exploring options for adding a postcode/zip code verification feature to the "contact us" page. The idea is for users to choose a country and/or city, with the system then displaying or confirming the appropriate post/zip codes based on valid o ...
My goal is to extract all child elements within a DOM element with a specific tag name and store them in an array. <xs:menu> <xs:submenu> </xs:submenu> </xs:menu> var item=menu.children.tags("XS:SUBMENU") ; Internet Explorer 7 ...
When attempting to load a page like /patient_profile, the CSS loads correctly. However, when continuing the path to /patient_profile/settings_patient_profile, the CSS breaks. Both pages mentioned are the same file, just testing the routing. The route is m ...
https://i.stack.imgur.com/1MIs5.png There are numerous questions like this on Stack Overflow without answers, which is why I'm posing this question. This particular issue only displays text and not a HTML iframe inside a table td element. <!DOCTYP ...
I am in need of assistance with the coding for a website I'm currently constructing at www.diveintodesign.co.uk/ChrisMcCrone/index.html The coding being used is sourced from http://jquery.malsup.com/cycle/ The central large image functions as a slid ...
I've been struggling to make my ajax json script update my HTML checked box with the value from the database, but so far I haven't had any luck. Any assistance would be greatly appreciated! Here's the JS code snippet: setInterval(functi ...
I am facing an issue while fetching data from a JSON API, as it is throwing an "Unexpected token" error. Below is the code that I have tried so far. Any help in resolving this problem would be greatly appreciated. Below is the code snippet: var Demo = Re ...
Struggling with a Dilemma: This issue has been driving me insane for the past three days... I am eager to utilize an angularJS variable as a background image without relying on a directive. My objective is to load images of any shape (square, rectangle, ...
I am currently working on developing a full screen slider with a unique feature on the last slide: a horizontal scrolling area. To achieve a smooth animation, I am using CSS translations to bring the div within the viewport. Oddly enough, the scrollbar do ...
Here's the scenario I'm dealing with: I have a dynamic website that includes a form with a "select" dropdown menu, followed by a link or button. When a user clicks on the link: If the selected option is "display," the data is shown using AJAX ...
Why does the switch button not work with the input type radio but works with a checkbox button? How can I maintain the radio input and solve this issue? @charset "utf-8"; /* CSS Document */ /* ---------- GENERAL ---------- */ body { background: #4a4a4 ...
Programming with JavaScript function removeElement(el) { el.parentElement.remove(); } document.getElementById('myButton').onclick = function () { const name = document.getElementById('name').value; const date = document.getElementById( ...
There is an issue with the drop-down menu I created: When I click on tabs like ALL or FILM, it closes all elements. To reopen, I have to click again on the button PRODUCT.dropdown-toggle. The code example looks like this: var App = function () { ...
Currently, I am in the process of creating a price list for a section of a website I'm developing. To make it interactive, I am utilizing checkbox type inputs along with labels so that users can select the services they desire, and the webpage will au ...
Recently, I dove into a project utilizing react with webpack, and everything was smooth sailing until I encountered the CSS hurdle. Despite successfully configuring webpack, trouble brewed when it came to styling. Specifically, setting the background image ...
Currently, I am in the process of designing a webpage that features a logo and a menu in the header section. However, I have noticed an issue where, upon zooming in or out, some of the menu items shift to a second row instead of remaining on a single row a ...
Greetings! I am in the process of developing a web application that needs to track user location upon button click. My choice for this project is the M.E.R.N stack, and based on the tutorials I have watched so far, there seems to be no need for an index.ht ...
Currently in the process of developing a photo-editing application using the Ionic Framework. Initially, I integrated an open-source JS Drag & Drop photo editor and made necessary modifications. However, my challenge lies in accessing the image created by ...