Is there a way to make dynamically added list items in a footer stretch across the width of their container?
The footer is created in WordPress and the list items are actually widgets. Here is an example: Fiddle
I can't manually set the width for each widget because the number of list items displayed could vary.
Let me know if you have any ideas!
M.
One approach is utilizing Flexbox
ul{
background:#000;
display: flex;
flex-direction: row;
padding-left: 0;
}
li.widget{
flex: 1;
background:#FFF;
text-align: center;
}<ul>
<li class="widget">ITEM 1</li>
<li class="widget">ITEM 2</li>
</ul>Another option is using CSS Tables
ul{
background:#000;
display: table;
padding-left: 0;
width: 100%;
}
li.widget{
background:#FFF;
text-align: center;
display: table-cell;
}<ul>
<li class="widget">ITEM 1</li>
<li class="widget">ITEM 2</li>
</ul>After experimenting with d3 recently, I noticed some similarities with jquery. Is it feasible to substitute d3 for jquery in terms of general dom management? This isn't a comparison question per se, but I'd appreciate insights on when it might b ...
Recently, I have encountered a frustrating issue with the date picker on my website. It used to work perfectly until a recent update on Chrome Android introduced a new date picker that is slow and unresponsive. Loading it takes several seconds, making it d ...
import React, { useState, useEffect } from "react"; import axios from "axios"; const Faq = () => { const [faq, setFaq] = useState([]); const [activeIndex, setActiveIndex] = useState(null); const fetchFaqs = async () => { ...
I'm currently facing an issue while using Revolution Slider. To better illustrate, I am referring to the original demo found at this link: . When browsing through the 'portfolio' tab, you'll notice that the images shrink and darken upo ...
Currently, I am immersed in a project and decided to implement AJAX for smoother form submissions. My initial attempt was trying to display text from a .txt file below the "submit" button, but unfortunately, that approach didn't yield the desired resu ...
I'm attempting to create a square that adjusts its size according to the screen size. Currently, I have the width set to 25%. Is there a way to ensure that the height remains the same length in pixels as the width? Appreciate any assistance on this ...
There seems to be some discrepancies when using sys.getsizeof on supposedly identical lists. (Python 2.7.5) >>> num_list = [0,1,2,3,4,5,6,7,8,9] >>> sys.getsizeof(num_list) 76 >>> num_list_copy = list(num_list) >>> sys. ...
Hi there, I am new to exploring HTML and CSS and I have been trying to display some images and text on a webpage. My goal was to have the text appear next to the image, which is working fine. However, I am encountering an issue where the text aligns itself ...
I am seeking to achieve a specific goal: I want to fade in a div with text after a certain number of seconds, then fade it out. I also want to repeat this process for 4 other divs, ensuring that they do not interfere with each other by appearing while the ...
I am a newcomer to the world of JavaScript programming and stumbled upon this example while practicing. <html> <head> <script type="text/javascript"> function changeTabIndex() { document.getElementById('1').tabIndex="3" d ...
Hey there, I'm having trouble inserting one DOM element into another. It's something I've done many times before successfully, but for some reason it's not working this time and I can't figure out why. Currently, I am using an Aja ...
I have just started exploring GoJS and decided to create a sample project by utilizing the Kanban sample available on the GoJs website. I attempted to use Angular and Typescript for this, but encountered an error. AppComponent.html:1 ERROR TypeError: Cann ...
Seeking assistance with a test site here that is currently in development. I am attempting to make the notification at the top remain hidden once the close button is clicked. Below is my current script: <style type="text/css"> <!-- .hide { displ ...
I've encountered an issue with my VueJS app. After running npm run build, a new set of dist/* files are generated. However, when I upload them to the server (replacing the old build) and try to access the page in the browser, it seems to be loading th ...
Looking for ways to speed up the loading time of an html5 video? Is there a method to make a browser process each webm video fragment as individual TCP streams, in order to take advantage of HTTP/2's enhanced parallelization? ...
Is it feasible to develop a website or application for Windows desktop machines that can remain focused until the user completes a specific task? For instance, if my YYY app/website is open and I require the user to input some text, I want to restrict the ...
I'm struggling to make the image fit 100% to the height of a CSS-created table. The table and image seem to be ignoring the dimensions of the parent element, as shown below. Since everything needs to be dynamic, I am working with percentages. .img ...
My question might not be perfectly phrased, for which I apologize. Is there a CSS method to select only the first child of an element without affecting others that are not grouped under the same parent? For instance: <div class="parent"> <div ...
I am looking to add Advertisements following the 2nd paragraph in every h2 tag. Here is an example of what I want: <h2>Sub title</h2> <p>1st paragraph</p> <p>2nd paragraph</p> <div>INSERTED AD</div> functio ...
Recently, I've been on a quest to create a straightforward file upload page that allows me to easily send files to my server. The concept is for the site to have a feature where I can simply upload a file and have it stored in a specific folder on the ...