I'm struggling with what seems like a simple task:
My goal is to design a sticky bottom-bar (similar to a cookie notification) containing two lines of text and a button. I need the button to be aligned next to the text on desktop, but on mobile, it should move to the next line.
Any suggestions for an efficient and straightforward solution to achieve this?
Appreciate any help!
If you want to create a responsive layout, you can utilize the grid system by placing col inside row and defining the size of your content accordingly. Check out this Bootstrap solution: https://codepen.io/DohaHelmy/pen/vYEjXzO
Alternatively, here is a solution that achieves the same result as Bootstrap's grid system but without using Bootstrap classes:
#cookies {
background-color: #eee;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 20px;
}
p {
padding: 20px;
}
button {
color: #fff;
background-color: #357832;
border: none;
height: 30px;
padding: 5px 20px;
}
@media (max-width: 576px) {
#cookies {
flex-direction: column;
}
}<div id="cookies">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<button>action</button>
</div>I am encountering a strange issue with links on the provided website in iOS: When I try to tap on the links under the "Galleries" menu, such as "Benny," nothing happens. It appears that Safari is trying to load the new page, but then it fails to do so. H ...
Is there a way to make the header background fade in after scrolling a certain number of pixels? The code I have sort of works, but not quite right. Any suggestions? Thank you! $(function () { $(window).scroll(function () { $(document).scrol ...
Can anyone provide guidance on how to assign a class to custom fields in Wordpress? I want to apply custom CSS to multiple custom fields but am struggling to give them individual classes. ...
Looking for some guidance on implementing a fade-in effect on a <p> tag with relevant CSS after making an AJAX call in response to a change event. Below is the current code snippet: $('#scenarioDropdownList').change(function() { var sc ...
I encountered an issue where I have created a submit button and anchor link with the same class name and style, but they are displaying differently. The anchor link appears to be larger than the submit button. You can see the difference in size here: http ...
So here is the puzzling situation I'm grappling with. Here's a peek at the HTML snippet: <p>This paragraph has <br><br> two unusual line breaks <br><br> and it happens TWICE!</p> The problem arises when tryi ...
My attempt to create a responsive menu resulted in unexpected outcomes when selecting specific elements. For instance, choosing "nav ul li" for list styles at the default size and using "ul li" for the breakpoint did not produce the desired effect. The is ...
Unique Scenario A user interacts with an element, triggering a change in the background image and storing data related to that element in localStorage: this process functions correctly. Next, the toggle variable is set to 0, the background image change ...
Hello there, I'm having trouble linking HTML pages together. Here is the code snippet I am currently using: <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"> <a class="navba ...
Can I calculate a value based on another value? Here's an example: .my-div { width: 50px; height: calc(width * 2) } Is this doable? ...
... <th style='background-color:#cccccc;font-weight:bold'><td></td><td>Address</td><td>Last Name</td><td>First Name</td><td>ZIP Code</td><td>City</td></th> ...
I'm currently developing a unique theme for WordPress and I've reached the responsive navbar section. Despite seeing the toggle icon, clicking it doesn't yield any results. Using the latest version of bootstrap directly from the website... ...
Currently, I am working on a Reactjs contact page where I have implemented a focus effect and transition for the textarea. However, I am facing an issue - when I resize the textarea, the transition is also applied to it, which is not desired. I have added ...
When I attempted to check the validity of my code on W3 validator, it highlighted errors referencing - No li element in scope but a li end tag seen. This pertains to a bootstrap dropdown menu that I came across in some examples provided by Bootstrap. Coul ...
I am attempting to calculate the percentage of "Yes" or "No" responses in an HTML table based on user input for each month's questions. Then, I want to display the average percentage in the "average" column for each month. For example, if the user sel ...
I'm encountering an issue on my website where everything works perfectly in Firefox, IE, and Safari, but there is a glitch in Chrome. You can see the problem here: http://tinyurl.com/chxg2tb In Chrome, the table at the bottom extends beyond the cont ...
Included below is my HTML code: <div id="background_div"> <img id="background_img" src="images/background.jpg" alt="dont matter"> <i class="material-icons">perm_identity</i> <div id="dropdown"> <ul id=" ...
My website consists of three main pages and multiple child pages. Each child page inherits its style from the parent CSS. country.routes.ts ... path: '', children: [ { path: '/country', component: CountryComponent ...
Looking to adjust the margin for every second element instead of every third when using media queries. .title:nth-child(3n+3) {margin-right:0 !important} @media screen and (max-width:1160px) and (min-width:900px){ .title:nth-child(2n+2) {margin-right:0 ! ...
Is there a way to create a gap in the last row by removing the borders? Any ideas on how I can achieve this? Thank you! ...