Im working on a search bar for a website, on a laptop screen/computer screen the search bar width seems fine. Next I want to also make the search bar mobile, tablet responsive as well, im trying to do something below using #media tag, but doesn't seem to be working. when I apply below and I open my website url on a mobile the whole page shrinks adding white spaces, please advice, how to apply the media property?
Below is my code.
.form-search{
width: 50%;
margin-left:auto;
margin-right:auto;
}
#media (max-width:480px) {
.form-search {
width: 60%;
margin-left:auto;
margin-right:auto;
}
}
make sure you add .form-search to the input box like below..
<input type="text" class="form-search" />
Try setting a height for the form element. Try modifying your code to something like this:
.form-search {
height: 150px;
}
#media (max-width:480px) {
.form-search {
height: 70px;
}
Use calc css, and substract other elements width and margins from it.
//if for example search button takes fixed 80px on screen:
.form-search {
width: calc(100% - 80px);
}
Related
I am working on a web site.
On min-width: 769px and max width of 1203px I was trying to remove the float for two divs so I can make it a full width option for both divs is:
Since I am using a page builder I tried to use my inspector tool on Chrome and search for appropriate classes or div that can do the trick and I pull the ff codes:
#media (min-width: 769px) and (max-width: 1203px){
.pbuilder_column_inner.pbuilder_droppable{
width: 100%;
display:block;
float: none;
}
}
But for some reason it doesn't do the trick. Am I doing it wrong?
Hi just remove width: 50% in or replace it with 100% instead:
.pbuilder_column.pbuilder_column-1-2{
width: 100%;
}
The following CSS properties:
float:none;
width:100%;
on the divs which classes are pbuilder_column pbuilder_column-1-2 (in the hierarchy, they are right below pbuilder_row_colwrapper ).
So, the code would be:
#media (min-width: 769px) and (max-width: 1203px){
.pbuilder_column{
float:none;
width:100%;
}
}
It does the trick, from my inspector at least.
Just use the class .pbuilder_column instead of .pbuilder_column_inner.pbuilder_droppable.
body,
#pbtheme_wrapper{
overflow-y: visible !important;
}
.pbuilder_column.pbuilder_column-1-2{
width: 100% !important;
}
You have to add below css:
#media screen and (min-width: 769px) and (max-width: 1203px){
.pbuilder_row_colwrapper .pbuilder_column {
float: none;
display: block;
width: 100%;
}
}
To me the real problem comes from the way you add your paddings to your elements. By removing or adjusting a lot of them, I was able to achieve it and increase the responsiveness (try to play around margin more than padding in some situations)
The main thing here, is not that your field aren't taking 100% of the container space, it's your button that overflows the container because of a 170px padding (with a !important, which is something I really don't recommend) so it seems like divs aren't taking the right amount of space.
So, I want to create a header image for my site. I want it to be responsive and I'm taking the 'mobile first' approach. I have a picture, and as title suggest, I want it to be displayed differently based on device's display size BUT it still has to be the same image file. For example, on mobile I will see only small part of the image, but as soon as I hit certain width, it will change to full size. This site http://adopciaki.pl has exactly what I want - I tried to replicate their layout but to no avail. Thanks for help!
there're several possibility's to achieve this, for example, on mobile:
img{
position: relative
width:auto;
height: 100%;
left:50%;
transform: translateX(-50%);
}
this will position the image centered, give the wrapper element a overflow hidden
then on tablet or desktop you can set the width to 100% and the height auto and so on...
One solution would be to use an SVG copy of the image and use CSS media queries to size it based on the screen size - https://jsfiddle.net/rkr9psbf/1/
#media (min-width: 1200px) {
img {
width: 300px; height: 300px;
}
}
#media (max-width: 600px) {
img {
width: 150px; height: 150px;
}
}
You'll see the image shrink to half the size by making your browser window smaller. Hope this helps!
I have picked up development on a site using Visual Composer in a Wordpress theme (Jupiter). On most pages there is a full width row with an image that maxes out at 1600px wide. The client doesnt like how small the photo shrinks as the browser window/mobile reposnse gets smaller.
http://spiderman.ephronsystems.com/full-width-tester/
I added this CSS in a mediaquery:
div.vc_single_image-wrapper.vc_box_border_grey {overflow:hidden;}
img.vc_single_image-img.attachment-full {height: 200px;width:auto;max-width:none;margin:0 auto;}
This seems to work pretty well but I would rather the image was centered in the browser window. Anyone know how to fix this? I can also replace the VC coding with straight html.
add margin-left: 50%; and transform:translateX(-50%); on the img at the following
#media (max-width: 736px) {
.wpb_single_image img {
height: 200px;
width:auto;
max-width:none;
margin:0 auto;
margin-left: 50%;
transform:translateX(-50%);
}
}
query
Here's the page: https://hamzicabdulah.github.io/Raptitude/
The divs with the "other-stories" and "footer" classes overlap when the height of the "other-stories" div is set manually:
.other-stories {
height: 65%;
}
#media screen and (min-width: 768px) {
.other-stories {
height: 89%;
}
}
If I remove the above code, the divs don't overlap. What's the workaround here, considering the manually set height of the "other-stories" div needs to stay there in order to work fine in Firefox?
Set Float to footer and other stories.
.other-stories {
height: 65%;
float:left;
}
#media screen and (min-width: 768px) {
.other-stories {
height: 89%;
float:left;
}
}
It overlaps, because the <div>s in your <div class="other-stories"> are overflowing out of the div itself.
Why do you have a fixed height on other-stories what functionality are you trying to gain? Also, is there a particular reason you are using height %s?
With flex is a little tricky. I suggest to change all, remove flex display and use bootstrap grid. Do you know?
When the screen width is less than 479px, I want the text to be under the slider. Right now when I resize my browser to < 479px, one of the text div is on top of the slider and the other is on the bottom.
Here's the testing link: http://chemistry2014.tw/
What I want it to look like:
This is due to the way you have set your html. If you have the option of changing the html markup, the best solution is to relocate the div and put it after the slider form. The alternative would be to absolute position the element with a top margin, at the correct screen size.
Example CSS:
#media only screen and (max-width: 479px)
.D-answer {
margin-top: 40px;
position: absolute;
// rest of CSS code
Edited
#media only screen and (max-width: 767px) {
.container{ width: 300px; } <----------------- add this
h4 {text-align:center; margin-left:0px;}
.D-answer {margin-left:0px;}
.A-answer {margin-right:0px;}
}