Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
Typical for a search bar, I've added a magnifying glass icon on the left side for UI purposes. On desktop it looks fine and stays at the position nicely. However, when switching to mobile the icon is repositioning itself according to the device width.
I thought by increasing the left parameter for #media (max-width: 768px) it will be fixed but it seems to behave differently.
A gif of the issue with the code on the right side is added. What am I doing wrong?
Try this:
.input_with_icon {
position: relative;
}
.input_with_icon .form-control {
padding-left: 40px;
height: 21px;
}
.input_with_icon img {
position: absolute;
top: 5px;
bottom: 0;
left: 10px;
margin: auto;
}
<div class="input_with_icon">
<input type="text" class="form-control" placeholder="Search here...">
<img src="images/search.png">
</div>
This is happening because you have hard-coded left:4em inside the media query.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
I build websites from scratch using bootstrap and have a question regarding containers/positioning.
I am going to be building a section where a container overlaps the header image (screenshot example attached). I was wondering if anyone has examples of this being used or knows what the technique is called so I can have a look into other examples?
The way to do it will be using absolute positioning but I'd just like to see some other examples of peoples attempts before I do my own!
Thanks for all your help.
I think we need to see the structure of your html to know how it's formed and apply the css rules accordingly.
But in case you don't have it, here is an example using negative margin:
.first {
background-color: lightgreen;
width: 100%;
height: 200px;
z-index: 1;
}
.second {
background-color: blue;
width: 60%;
height: 200px;
margin-left: auto;
margin-right: auto;
margin-top: -80px;
z-index: 2;
}
<div class="first"></div>
<div class="second"></div>
i have tried doing this before, and i used z-index: -1 for the image.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
How can I have links in my pages sides like places i colored in image below and move as page scrolls (fixed position)?
With that amount of information I can give you this much of an answer
HTML
left
right
CSS
.aside-fixed {
position: fixed;
z-index: 20;
top: 50%;
background: black;
padding: 10px;
color: white;
}
.aside-left {
left: 0;
}
.aside-right {
right: 0;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Can anyone explain me, why <input> and <a> have different heights (while having same font, padding, margin and border settings) in Internet Explorer 9-11? Firefox and Chrome render them with the same height.
Here is example:
HTML
<input class="text" value="input"/>
<a class="text">button</a>
CSS
.text {
font-family: 'Arial';
padding: 7px;
font-size: 12px;
line-height: 1.4em;
border: 1px solid black;
display: block;
float: left;
width: 100px;
margin: 0;
}
And fiddle
Is there any way to prevent such behavior in IE? Thank you in advance.
There is a Question similar to this one which already got many answers and 18000 views.
I think you will find a solution to yours there too
CSS - Exact same height and alignment of button and input text box
Also you could just try to give both of them a height: XYpx so you can make sure they will always have the same heights. I guess giving them a height will also be better for your styling later on
I also found this Question on how to control the heights in different browsers
How can I control the height of text inputs and submit input buttons in different browsers?
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I have used upload file (type=file) to upload a file. I want to change the button to text. Since the user will using either Google chrome or IE. So I have to consider both browsers. I would prefer simple code.
Here is my code (I'm using multiple upload files)
<td><input type="file" name="picture[]" id="picture" ></td>
thanks
If I understand right, you're asking about styling input tags with type="file". This is pretty difficult, but what I usually do is wrap the input, and include another tag that will show the desired style. I then position the input tag on top (so that it can still be clicked), but make it transparent so the underlying style shows through.
Something like:
HTML:
<div class="uploadWrapper">
<p>Click to choose file</p>
<input type="file" name = "filedata" size="100" />
</div>
CSS:
.uploadWrapper {
overflow: hidden;
position: relative;
height: 25px;
width: 250px;
background: rgb(10,100,210);
}
.uploadWrapper input {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
position: absolute;
z-index: 1;
width: 100%;
height: 100%;
}
.uploadWrapper p {
margin: 0 10px;
position: absolute;
line-height: 25px;
}
http://jsfiddle.net/BYossarian/NVr6t/
"Each browser has it's own rendition of the control and as such you can't change either the test or the orientation of the control."
- Original Source
However, I believe you can be a bit tricky and modify the button with CSS.
#picture {
text-decoration: none;
/* etc... */
}
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
Please check this link
The left panel text goes hidden under the center picture if I re-size the browser window.
How do I fix it?
Set .ac-wrapper h2 30% instead of 50%
.ac-wrapper h2 {
width: 30%;
}
EDITED
html
<div class="ac-device">
<h2 style="color:#888888">Logical & analytical. <span>Argues till someone <br>just walks away!</span></h2>
<img src="images/screen1.jpg">
<h3 class="ac-title">Not enough of an artist to work upon your imagination. Prefers to do stuff freely. Some may not like that, but that's the way I am!</h3>
</div>
CSS
.ac-wrapper h2 {
top: 20%;
width: 100%;
right: 100%;
position: absolute;
font-weight: 300;
font-size: 4em;
text-align: center;
padding: 0;
}
I'm looking at Chrome Dev Tools and I don't actually see where at any point styles from within a media query are being loaded. The obvious result you want is that right now that left panel is
position: absolute;
width: 50%;
and of course at this resolution you want that width to be something smaller. You can change the styles as your title suggests with a media query, but none's firing. Do you mind posting your relevant CSS to see why--if it exists--your mq isn't working?
Judging by the quality of your design I'm guessing you definitely know what a media query is, but just in case:
#media screen and (min-width: 1366px) {
id.class {
width: 40%; // or whatever
}
}