I'm encountering an issue with my design. I am utilizing Bootstrap 3 for desktop, along with flexbox. I have tried both methods and have 8 columns.
When it comes to mobile,
I am struggling to find a solution that works for both desktop and mobile designs. Creating separate designs for each is not an issue, but is there a way to incorporate both into one unified design? Thank you
Using bootstrap, I find it challenging to maintain code consistency between desktop and mobile views without separating the code. On a desktop, you can achieve the layout with:
<div class="col-md-2">1801290001</div>
<div class="col-md-2">Roldán Rodriguéz, David</div>
<div class="col-md-1">-</div>
<div class="col-md-1">Absentismo</div>
<div class="col-md-1">30/05/2018</div>
<div class="col-md-1">30/05/2018</div>
<div class="col-md-2"><button type="button" class="btn recruitment">PDTE.
CONTRACIÓN</button></div>While for the mobile view, you'll need:
<div class="col-1 col-md-1"><input type="checkbox" value=""></div>
<div class="col-10 flex-column">
<div >1801290001</div>
<div >Roldán Rodriguéz, David</div>
<div >-</div>
<div >Absentismo</div>
<div >30/05/2018</div>
<div >30/05/2018</div>
<div ><button type="button" class="btn recruitment">PDTE. CONTRACIÓN</button>
</div>
</div>I have a programming idea that involves the following: * Clicking on Span 1 will reveal Span 2 and disable Span 1. * Clicking on Span 2 will reveal Span 1 and disable Span 2. Below are the codes I have written, but I am not sure if they are correct. Any a ...
Is there a way to remove the unwanted spaces around this SVG image in my HTML document using CSS? The image has some red borders indicating the areas with excessive spacing. Here is a screenshot link for reference: https://i.sstatic.net/GYBH2.png The stru ...
I'm unsure if I can accomplish this task using just CSS and HTML or if I need to incorporate Javascript because my research did not yield much information on the subject. I have not attempted anything yet as I am uncertain about the approach I should ...
https://i.sstatic.net/LhmEub6d.png What I'm currently observing (the theme doesn't seem to be applied) This is how it should appear https://i.sstatic.net/fL4Fyf6t.png I've managed to make the bootstrap theme work on the standard version ...
I am trying to create a cursor element that follows the mouse X and Y position. When this cursor hovers over a text element in the menu, I want it to change in size and position. The size of the cursor should match the width and height of the text being h ...
Is there a way to ensure that all my randomly positioned images stay within the bounds of their 100% wrap without being cut off? Currently, some images are getting cut off due to the overflow: hidden setting. Also, is it possible to prevent the images from ...
I've been struggling to make this work for the last 24 hours. Initially, I got it working in Chrome using CSS tricks' block:before method, but then realized it didn't function properly in Firefox. I attempted the table method as an alternat ...
Even though I've searched extensively on how to center text horizontally, none of the suggestions have worked for me. I attempted using margin-left: auto, margin-right: auto, and text-align: center for the class nav-center, but none of them had the de ...
I have a list of group items, with 7 items per column. Each item has an id, such as #a1, #b2, etc. I am using the Simple Slider plugin to display two columns on each slide: one with the list and one with the description #descr. I am looking for a more effi ...
How can I use JavaScript to update the src value of an iframe based on input? <input class="url" id="url1" type="url" value="youtube url"> <input onclick="changevideo()" class="add-video" id="add-video1" type="submit" value="add to play ...
I am using a unique jQuery script that I created myself, and I want it to activate when the scroll reaches the tab block (the blue and grey block at the end of the page). Check out the live version This is my HTML: <section id="Block" class="containe ...
There's an error that I can't figure out: Uncaught TypeError: Cannot read properties of undefined (reading 'classList') console.log(slid[numberArray].classList) is working fine, but slid[numberArray].classList.add('active') is ...
I am brand new to front-end development and I'm attempting to create an onClick() function for an element. However, it seems like the js file where the function is located is not being imported properly. I've tried following some instructions to ...
My Bootstrap 4 layout consists of three columns using col-sm classes. You can view the codepen example here: https://codepen.io/anon/pen/EryRJL?editors=1100 Within each column, I have a paragraph of text followed by a button. I'm trying to figure out ...
I am currently utilizing a react color picker to create a personalized 16 color gradient. The process involves selecting a color from a dropdown menu and then using the color picker to make adjustments. This action updates an array that dictates the stylin ...
In my implementation based on this example code from https://www.w3schools.com/howto/howto_js_tabs.asp, I have a specific requirement. I want the tab for "Paris" to remain active even after the page is refreshed if the user has clicked on the button for "P ...
Image version: https://i.sstatic.net/ExaGb.png I'm encountering some difficulties when trying to update the appearance of my page PrintExtraInfo.aspx. In PrintExtraInfo.aspx: <asp:Table ID="Table1" runat="server"> <asp:TableRow> < ...
Applying the less-rails gem. Implementing this code snippet to blend two colors: @base: #ffdc52; @add: #195742; .colour{ color: mix(@base, @add); } Encountering the subsequent error message: Less::ParseError: error evaluating function `mix`: Cannot ...
After creating a search panel for my application using UI binder, I noticed that the desired behavior is not being achieved. Ui.xml <g:HTMLPanel> <c:SimpleContainer> <c:InfoContainerHeader text="{labels.searchFilter}" /> ...
There is a minor issue that I find quite annoying. The validation error message takes too long (approximately 3 seconds) to disappear after a valid input has been entered. Let me give you an example. https://i.sstatic.net/8UKrm.png Do you have any tips o ...