I've been struggling with alignment issues on my Tumblr blog.
Specifically, I'm trying to align a header and a search icon.
You can find my site here.
Here is the mockup I am aiming for:
However, if you visit my site, you'll notice that the header and search bar are not aligned like in my mockup above.
I have experimented with different margins and techniques, but nothing seems to work.
Another important aspect is making sure it responds to browser changes so it stays aligned at all times.
Discover the following CSS guidelines and incorporate them into your stylesheet
css: line: 555
iframe#tumblr_controls {
position: fixed !important;
right: -310px !important; // shifts button 310px to the right.
top: 9px !important;
width: 160px;
z-index: 5000 !important;
}
To align the search box properly:
css: line: 150
#search {
border-left: 0 solid #DDDDDD;
border-right: 0 solid #DDDDDD;
padding: 20px 15px 6px;
position: absolute;
right: 32px; // adjust value as needed
top: 0;
}
To switch the Lens icon from left to right in the search box
css: line: 161
#search input[type="text"] {
background: url("http://static.tumblr.com/twte3d7/V9ym4qy8v/search-white.png") no-repeat scroll 95% 6px #FCFCFC;
border: 1px solid #DDDDDD;
border-radius: 0 0 0 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
color: #212121;
font: 12px 'Karla';
padding: 6px 35px 7px 15px; **// Make changes here**
transition: all 0.7s ease 0s;
width: 150px;
}
Update the above mentioned CSS rules
padding: 6px 35px 7px 15px;
#search {margin-right: 15px;}
You can locate this code snippet in Line 150 of your primary website homepage.
I'm trying to have a logo image stay fixed at the bottom of a navigation drawer, but when I use absolute positioning and set it to the bottom, it overlaps with the list items on shorter devices. When the scroll bar appears due to shrinking the browser ...
Hope you're all doing well. I've been having some trouble with using header("Location...") to redirect from one page to another on my website. For some reason, it keeps redirecting me back to the same page. I've gone through my code multiple ...
I'm currently developing an interactive "accordion" component that can accommodate multiple child elements. Each child item closes to the height of its header, but expands evenly with other open siblings when activated. If this explanation is unclear, ...
Struggling to make an iframe and div both have 100% full height on the page? I need a footer menu with 280px height, leaving the rest of the page for the iframe. After extensive research, it seems like jQuery might be necessary as CSS Flex didn't wor ...
I am currently utilizing the datalist feature for my autocomplete field. Everything is functioning properly. In my list, I have the values james, reeta, and mary. For example, if I type in "r" in the autocomplete box, it shows both reeta and mary because ...
I'm having a text field with a jQuery hint. How do I align the font to be in the middle? I've attempted using vertical-align: middle but it doesn't seem to work. <style type="text/css"> #name { border: 1px solid #c810ca; heig ...
Is it possible to change the text content of an HTML element without affecting its size? I am using Bootstrap and the card component. I want to dynamically update the card text without impacting the overflow that I have already set. Here is a sample of t ...
Currently, I am utilizing the .hide() and .show() functions to toggle the visibility of my page contents. Additionally, I am using the .HTML() function to change the elements inside a specific div. $('#wrap').html(' <span id="t-image"> ...
I am stumped as to why this particular file is not getting posted. Despite my thorough search for solutions, I have yet to pinpoint the issue. All the necessary ini file variables seem to be in order and I have verified the correct form type. Additionally, ...
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Bootstrap Popover</title&g ...
After receiving questions, I included more details on how I'm utilizing the constants. The main issue I am encountering is that the constants are being added to the global object, which raises concerns about potential name collisions. I created a Web ...
When the page loads, I have something similar to this: echo "<td class='audio'><audio controls><source src></audio></td>"; After that, I initiate an ajax call triggered by a click event to retrieve relative audio U ...
Exploring the world of HTML and CSS designs for the first time. Here's a code snippet I've been working on: <html> <body> <table width="100%"> <tr> <td width="25%"> </td> ...
I have created a select list for various types of restaurants. Users can choose a food type, click search, and receive a list of restaurants specializing in that particular cuisine. To add an initial option to the select dropdown, I used the following cod ...
I am a beginner user of NodeJS and I have a specific request. I need assistance with setting up a page redirect from one page to another upon clicking on a link. Any guidance provided will be greatly appreciated. Here is the code snippet: app.js var expr ...
After multiple attempts, I am still facing an issue with setting up the Google Map on my website. Despite inputting different coordinates, it consistently shows a location in China instead of the intended one. Here is the code snippet that I have been usin ...
When implementing a new design on a website, how can you bypass the need for users to clear their browser cache in order to see the updated changes? Is there a way to automatically refresh the cache once a new version of the website is uploaded, or are th ...
I would like to add a colored square to highlight the active menu item. .main-menu ul { padding: 0; margin: 0; text-align: center; } .main-menu li { list-style-type: none; display: inline-block; padding: 40px 0; } .main-menu a { font-fam ...
/*Custom Styling for Divs*/ #box1 { border: 1px solid; border-radius: 25px; width: 900px; } #box2 { border: 1px solid; border-radius: 25px; width: 430px; } #box3 { float: right; border: 1px solid; border-radius: ...
Incorporating Selenium into my Java project, I am on a mission to purchase coupons during a test and subsequently display them in the coupon overview. Multiple coupon packages can appear in this area if the user has previously made purchases. The structur ...