Site: collecthw.com
When the NavBar is full screen it takes up 100% of the width of the screen and the search bar is in the NavBar.
On Mobile and when you shrink your browser window, it changes. I can't for the life of me figure out where I should be looking to make it not do this.
fletch pointed me to the right direction
#media (max-width: 767px) {
body {
padding-right: 20px;
padding-left: 20px;
}
needs changed to
#media (max-width: 767px) {
body {
padding-right: 0px;
padding-left: 0px;
}
Related
At https://www.sfwatertaxi.net, any suggestions why the spacing underneath the footer navigation items is disproportionately large on mobile devices?
Below is the code used to create footer navigation columns on mobile.
ul.nav {
column-count: 3;
display: inline-block;
}
I just inspected your footer CSS code and found out that you have this code:
#media (max-width: 767px)
.gh-foot {
padding-bottom: 160px;
padding-top: 64px;
}
Maybe it's because of a custom library component.
To FIX IT, you can add something like this to your code:
.gh-foot {
padding-bottom: 90px !Important;
}
If you want to manage the spacing just on mobile, you can use this instead:
#media (max-width: 767px) {
.gh-foot {
padding-bottom: 90px !Important;
}
}
I am using a WordPress theme called Spacious. I have set a site logo but I can't seem to make the logo responsive. The logo only responds to certain media queries, but none for mobile screen sizes.
I changed the site logo's location from the center below the header to over the header to the left. I think that this may be the issue but I'm not sure. Am I doing something wrong? How can I go about making my logo responsive? The link to my site is: davenport.ryannemurphy.com. The CSS code I am using for the logo is below:
#media only screen and (max-width: 600px) {
.custom-logo {margin-top: 25px;
position: absolute;}
#media only screen and (max-width: 768px) {.header-image {height: 100px;}
.custom-logo {width: 50%;
margin-top: -20px;
}
}
#media only screen and (max-width: 900px) {
.custom-logo {width: 50%;
position: relative;}
}
#media only screen and (max-width: 1100px){
.custom-logo {width: 50%;
margin-top: -20px;
position: relative;
}
}
#media only screen and (max-width: 1500px){.custom-logo{margin-left: 100px;}}
#media only screen and (max-width: 1650px){.custom-logo {margin: 30px; }}
#media only screen (min-width: 1651px) and (max-width: 1850px){.custom-logo {width: 90%;}}
#media only screen and (max-width: 1950px){
.custom-logo {margin-left: -100px;
margin-top: -98px;
position: absolute;}
}
I believe you're missing a closing bracket ("}") in line 3 in the CSS you attached.
Use an online CSS formatter (for example, https://www.cleancss.com/css-beautify/) to format your CSS code and you'll see that most of your media queries are actually below the first one in hierarchy because of that missing curly bracket.
Not sure this is causing the issue, but it's definitely something that can confuse the browsers and cause bugs.
I was having the same problem in Sinatra theme.
I ended up using just width and height but I had to put !important after each.
Here is the css I used:
#media screen and (max-width: 960px) {
img[itemprop="logo"] {
width: 281px !important;
height: 145px !important;
}
}
You have an < img width="450" height="92" .../> hardcoded into your html. I think you need to remove the height and width attributes on the img tag.
I'm using latest wordpress and builduppro themes.
Currently, I use logo size 90px for desktop, tablet and mobile.
I want logo size 90px for desktop only.
How can I decrease logo size into 60px(30%) for tablet and 40px(50%) for mobile?
website : http://logo.ayumall.com
I'm not a programmer and can't find any WP plugin to solve this problem.
Will appreciate any feedback.
I just edited on style.css but no luck.
#media screen and (max-width:768px)
{
.logo
{padding-top: 10px !important; text-align: left !important;}
}
Currently my Responsive.css :
/* Mobile Portrait View */
#media screen and (max-width:767px) {
.logo{ width:auto; float:none; text-align:center; padding:0;}}
/* Tablet View */
#media screen and (min-width:768px) and (max-width: 980px){
.logo{ float:none; text-align:left; width:auto;}}
#media screen and (max-width:1169px) and (min-width:981px) {
.logo{ float:left; width:auto}}
#media screen and (max-width: 980px){
.logo img{ height:auto;}}
the opening bracket is missing in your code after ".logo"
#media screen and (max-width:768px)
{
.logo
{
padding-top: 10px !important; text-align: left !important;}
}
Checked your website.
You can achieve this by CSS. Put the following code in your stylesheet.
/* For Tablets */
#media screen and (max-width: 768px){
.logo img{height: 60px;}
}
/* For Mobile */
#media screen and (max-width: 480px){
.logo img{height: 40px;}
}
Make sure to remove your cache after making these changes to css.
Hope it helps.
When in responsive website the sidebar moves to the footer of the page but the background-color won't fix the size of it, as the print screen.
http://i61.tinypic.com/v8hhkj.gif
What could I do here?
The website: http://bloganacastro.com
You have set width: 100% for the sidebar for proper display in responsive..
#media (max-width: 768px) {
.sidebar.col-md-4 {
width: 100%;
}
}
You have set width: 30% for the sidebar, which makes the background to shrink.
Let the browser calculate the width.
#media (max-width: 768px) {
.sidebar.col-md-4 {
width: auto;
}
}
I'm having some odd space issues on the left of my site. For some reason there is slightly more space on the left than on the right in mobile view, thus looking off-centered. I'm guessing its off for desktop view as well, but its not noticeable. I can't figure out what is making it this way. http://jeffreydowellphotography.com/
/* ---------->>> MOBILE gap/space issues <<<-----------*/
#media screen and (max-width: 400px) {
#pageWrapper { margin: 0;}
.sqs-layout .sqs-row .sqs-block:last-child {
padding-bottom: 0;
padding-top: 0;
}}
/* ---------->>> MOBILE center logo <<<-----------*/
#media only screen and (max-width: 400px) {
h1.logo {
text-align:center;
margin-bottom: 20px !important;
}}
/* ---------->>> MOBILE logo size <<<-----------*/
#media only screen and (max-width: 400px) {
.logo-image .logo img {
max-height: 110px;
margin: 5px;
width: auto;
}
.social-links {
padding-top: 20px;
}}
Try removing the margin: 5px; on .logo-image .logo img in your mobile styles. The image with the margin may be wider than the div that contains the image and it comes off as being non-centered.
UPDATE
I took a look at your site, its actually the margin on the .slide selector. Add this in your mobile styles:
.slide { margin: 0; }