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;
}
}
Related
i have added background in my bootstrap navbar dropdown menu, it's working completely fine on big screen devices, but on small screen devices like mobile phone the background colors become transparent and the menu overlaps my content
.nav-dropdown {
background: #fff;
#include border-radius($popover);
box-shadow: 0 1px 2px rgba(0,0,0,.25),0 0 1px rgba(0,0,0,.35);
border: none;
top: 134%;
is there anyway to make the dropdown background be same on small screen devices.
Edit
I tried Chandra kumar answer but it doesn't worked out:
#media only screen and (min-width : 480px) {
body {
padding-top: 67px;
}
.navbar-header {
border-bottom: none;
}
.navbar-fixed-top {
position: fixed;
}
nav.navbar {
padding: 5px 0;
.filter-links {
margin-top: 16px;
margin-left: 0;
}
.nav-dropdown {
background: #fff;
}
#logo {
width: 138px;
margin-left: 0;
}
.new-post-button {
display: inline-flex;
}
}
Desktop View:
Mobile View Right Now I want it to be exactly like desktop view
I suggest to use media queries and add the classes you want to tweak
For example:
/* Extra Small Devices, Phones */
#media only screen and (min-width : 480px) {
.nav-dropdown {
background: #fff;
}
}
For Bootstrap 3 default media queries you may found it here
I'm trying to utilize max-width on a button with a margin-left and margin-right set to 28px.
When my site is shrunk down for mobile, this button still retains its margins and carries over off-screen. How can I fix this?
Here's my CSS for the button:
.button {
border: 1px solid;
border-color: #5094CF;
background: #FFFFFF;
width: 450px;
max-width: 100%;
height: 48px;
margin: 0 28px 0 28px;
}
You need mediaqueries for all resolutions you need, for example:
#media (max-width: 600px) {
.box {
margin: 0;
}
}
#media (max-width: 400px) {
.box {
margin: 10px;
}
}
Different margins depending on the resolution of the client.
Good luck
There's a pleasantly easy fix for your issue, try this:
#media all and (max-width: 658px) { // for mobile devices
.button{
// your preferred styling properties for displaying in mobile devices
}
}
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; }
I'm creating a fluid layout for a site. I'm trying to hide the contents of a <div> or the whole <div> itself in the mobile view, but not the tablet and desktop view.
Here's what I've got so far...
#title_message {
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
I have the display set to 'none' for the mobile layout and set as block on the tablet/desktop layouts... Is there an easier way to do that, or is that it?
You will need two things. The first is #media screen to activate the specific code at a certain screen size, used for responsive design. The second is the use of the visibility: hidden attribute. Once the browser/screen reaches 600pixels then #title_message will become hidden.
#media screen and (max-width: 600px) {
#title_message {
visibility: hidden;
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
}
if you are using another CSS for mobile then just add the visibility: hidden; to #title_message.
Set the display property to none as the default, then use a media query to apply the desired styles to the div when the browser reaches a certain width. Replace 768px in the media query with whatever the minimum px value is where your div should be visible.
#title_message {
display: none;
}
#media screen and (min-width: 768px) {
#title_message {
clear: both;
display: block;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
}
}
The solution given didn't work for me on the desktop, it just showed both divs, although the mobile only showed the mobile div. So I did a little search and found the min-width option. I updated my code to the following and it works fine now :)
CSS:
#media all and (min-width: 480px) {
.deskContent {display:block;}
.phoneContent {display:none;}
}
#media all and (max-width: 479px) {
.deskContent {display:none;}
.phoneContent {display:block;}
}
HTML:
<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) { #title_message { display: none; }}
This would be for a responsive design with a single page for an iphone screen specifically. Are you actually routing to a different mobile page?
You can be guided by this example. On your css file:
.deskContent {
background-image: url(../img/big-pic.png);
width: 100%;
height: 400px;
background-repeat: no-repeat;
background-size: contain;
}
.phoneContent {
background-image: url(../img/small-pic.png);
width: 100%;
height: 100px;
background-repeat: no-repeat;
background-size: contain;
}
#media all and (max-width: 959px) {
.deskContent {display:block;}
.phoneContent {display:none;}
}
#media all and (max-width: 479px) {
.deskContent {display:none;}
.phoneContent {display:block;}
}
On your html file:
<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>
i just switched positions and worked for me (showing only mobile )
<style>
.MobileContent {
display: none;
text-align:center;
}
#media screen and (max-width: 768px) {
.MobileContent {
display:block;
}
}
</style>
<div class="MobileContent"> Something </div>
Well, I think that there are simple solutions than mentioned here on this page! first of all, let's make an example:
You have 1 DIV and want to hide thas DIV on Desktop and show on Mobile (or vice versa). So, let's presume that the DIV position placed in the Head section and named as header_div.
The global code in your CSS file will be: (for the same DIV):
.header_div {
display: none;
}
#media all and (max-width: 768px){
.header_div {
display: block;
}
}
So simple and no need to make 2 div's one for desktop and the other for mobile.
Hope this helps.
Thank you.
try this
#media handheld{
#title_message { display: none; }
}
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;
}