My ajax search bar looks central on my mac screen, but on a phone screen, it is way off-center.
Does anyone have a code that can 'float' it center on all screen sizes?
The search bar in question is on www.rebelleforce.com
Thank you
I've tried various different CSS codes that I've found online in other forums - some centralize it on my mobile phone screen, but then I lose the central location on a computer screen.
I see your code to centralize the search bar you use
div[id*='ajaxsearchlite'].wpdreams_asl_container {
width: 62%;
margin: 0px 250px 0px 250px;
}
try to change "margin" value to margin:autio;
paste this code into style.css file in your theme.
div[id*='ajaxsearchlite'].wpdreams_asl_container {
width: 75% !important;
margin: 0 auto !important;
}
This code causes the search box to be centered on all screens.
Add this in your css:
#ajaxsearchlite2 {
margin: 0 auto;
}
and if still not working, use the important statement:
#ajaxsearchlite2 {
margin: 0 auto !important;
}
Related
I am trying to customize the Lightbox/zoom feature in Cargo Collective, believe it uses Photoswiper.
As of now it fills the whole screen and would like to be able to control the size so it does not cover the top and bottom nav bars. Can I add some padding or block to the PSWP? The PSWP is not showing up in the general CSS editor. SO it seems as though I would need to add some of my own code.
The goal is trim off the top and bottom and also control the size of image when zoomed.
Thank you in advance.
I came across the same problem trying to resize the PhotoSwipe image within my Cargo Collective site. I added the following to the custom CSS and it worked perfectly:
.pswp img {
object-fit: contain !important;
max-height: 400px !important;
max-width: auto !important;
margin-top: 100px;
margin-bottom: 100px;
}
I also styled the background with the following. You could also add margin top and bottom here if you want to add a gap in the PhotoSwipe background.
.pswp__bg {
background-color: #fff !important;
}
.Pswp_bg image-zoom-background {
background-color: #fff !important;
}
Cheers!
An update - this solution looked great on my screen but too small on a big screen. Styling with percentages rather than a single px size is a better solution here. Hence:
.pswp img {
object-fit: contain !important;
max-height: 70% !important;
max-width: auto !important;
margin-top: 5%;
margin-bottom: auto;
}
I was supposed to correct the issue with responsivesness on mobile for this site. At this point I need help to figure out why this website behaves like this on a mobile view. I cannot figure out why there is horizontal scrolling the landing page.
Its due to the social icons Css
Just paste that in your theme custom style.css
.norm_row {
left: 0 !important;
right: 0 !important;
width: 100% !important;
text-align: center !important;
}
This issue has been bothering me forever. I'm using the Bootstrap framework and whenever I view my site on mobile devices I get 20px margins on the right and left side of the navbar.
In the past some have suggested the following:
.navbar-fixed-top {
margin-left: -20px;
margin-right: -20px;
}
Unfortunately, this doesn't work. It solves the issue with the navbar margins but creates issues with the rest of the page.
You can view an example of this problem here: http://www.theplaybook.co
Any insights are much appreciated.
It's caused by this line (in bootstrap-responsive.css, line 802):
#media (max-width: 767px) {
.navbar {
padding: 0 20px;
}
I'm currently trying to optimize a Wordpress site for mobile devices, but I'm struggling with getting the footer of the site to cooperate. The site is here:
http://whitehallrow.com/
When loaded on mobile, the width of the body shrinks in accordance with the screen size and wraps all the contained text within it. However, the footer keeps its width, which I understand is because the width is hard-coded to look good on a computer screen. I've made a media query in the CSS that targets devices with screens 500 pixels wide or smaller, in order to get the footer to resize to the width of the body. Here is a snippet of my CSS that I've been tweaking:
#media screen and (max-width: 500px) {
#customfooter{
width:100%;
}
}
For whatever reason, this is not working - it still shows the footer as being much wider than the body. I've tried max-width:100%, width:auto; max-width:auto, and none of them work.
How do I achieve this without hard-coding anything?
Change your CSS from
#teakfooter {
width: 100%;
}
#verybottom {
width: 100%;
}
add a class so this gets higher priority
.page #teakfooter {
width: 100%;
}
.page #verybottom {
width: 100%;
}
I tried it out using Firebug and it seems to be working well like this.
Edit: After going over a few more things in the comments, I noticed a couple of things causing the footer to not fill out.
.site {
padding: 0 1.71429rem;
}
This is causing #customer footer to have padding on both sides.
#teakfooter {
margin-left: -40px;
}
This is causing #teakfooter to have whitespace on the right side.
also in firebug you can check METRICS (in right column you have Computed Styles, Styles, Metrics, etc.). In METRICS you will see that around your body there is a padding: 24px;
Solution:
body {
padding: 0;
}
I've been trying to customize Blogger's Simple template and have hit a wall in getting the background image for footer-outer to match up - I am still learning CSS and am not sure where the padding on left is coming from or how to get it to completely cover up the repeating background of body-fauxcolumn-outer at the very bottom. Or even if this is the best way to be coding it. Please help!
http://fantasyartofetsy.blogspot.com/
Here's my edited code -
.footer-outer {
width: 1000px;
background: url(http://i1192.photobucket.com/albums/aa324/faeteam/fae-bg-bottom.jpg) no-repeat top center;
background-color: #093e60;
}
.body-fauxcolumn-outer {
background: url(http://i1192.photobucket.com/albums/aa324/faeteam/fae-bg-middle.jpg) center;
background-repeat:repeat-y;
}
Seems better with the following modification:
.content-inner {
10px 60px 0 10px;
}
The background image is now displayed horizontally as intended I guess but there's still text displayed half on the image half on the blue background. Where do you want it to be displayed?
EDIT: maybe also modify that:
.footer-inner {
padding: 80px 15px 0 15px;
}