I'm working on a site using the Bootstrap framework and noticed that on mobile devices there's an empty white margin on the right hand side of the window. I believe this is some sort of issue with the tag although I can't pinpoint it.
There are 20px margins but if I remove them the .brand logo shifts partially off the screen on the right hand side.
You can view the problem here.
Sorry to not provide the code here. I'm just not even sure which CSS to provide as I can't identify the problem.
In the block which had the heading 'Download original swipe files to ensure your success.' you have the text, an image to the side, and the caption 'one click download of swipe file'
The caption is actually a svg file and I think at some viewports it's too wide for the bootstrap column and it's disrupting the grid. I can't tell for sure, but you could try temporarily removing the caption and see what happens.
The behaviour I'm describing is most obvious when the browser window is around 780px ... it's always possible that we are looking at different things ;)
Good luck!
.navbar .brand has
margin-left:-20px;
so the behavior seems normal to me.
Set it back to 0 via your mediaquerie
edit : remove padding on body at :
#media (max-width: 767px)
body {
padding-right: 20px;
padding-left: 20px;
}
and margin at .navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top :
#media (max-width: 767px)
.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
margin-right: -20px;
margin-left: -20px;
}
Related
I have a problem with my website. (www.cemf.ir). The footer has three columns and everything works fine (links are clickable) when it has three columns. However, when I resize the browser and the width gets smaller, the number of columns in the footer becomes one and only the links in the last part of the footer works. I guess there is something wrong with .column-wrapper class in the css when the screen width gets smaller. Can anyone help me?
Setting the float of the last column wrapper should work.
#media screen and (max-width: 767px)
.site-footer.three-col .column-wrapper:last-child {
float: left;
}
For some strange reason whose cause I can't find out, the very last .column-wrapper in the footer covers (although transparent) almost the whole screen on mobiles, including most the other footer elements, and also doesn't let any mouseclicks through.
In the browser code inspector adding the following CSS setting made the links in the other footer elements clickable:
#recent-posts-5 {
pointer-events: none;
}
I could find a good solution for it. I used z-index property as you see below:
#media screen and (max-width: 767px)
.column-wrapper:last-child {
z-index: 1000;
}
.column-wrapper:nth-child(2) {
z-index: 1001;
}
.column-wrapper:first-child {
z-index: 1002;
}
z-index put columns layer on layer and the problem of the last column-wrapper was solved, since it is now under all the columns in the footer.
Website: www.tarbooshla.com
When viewed on a mobile device, the search icon is not aligned with the rest of the navbar (the logo and the menu icon). How can I fix this?
I have tried updating all the themes and plugins to no avail.
It seems to be displaying exactly as intended with the current rule set. I'm assuming you want it to populate on the right? I was able to move it substantially with the padding property, however I don't think that's the best scenario for you. The search icon is currently not text at all, but a pseudo element displayed in an ::before scenario, if you want it to show up after when it reaches a certain size, I recommend having a media query that sets it to display:none; and an ::after pseudo element that displays when it gets to your smart phone #media and screen (max-width) size.
It is happening because of the limited space in mobile devices.So what you can do is go inside the header.php and put the search bar inside the main navigation bar along with home,about us, etc so search will appear once the user press menu button.or with the help of css,align the menu to the left so that search button can fit into the right.
This code may help you. Make sure to add this CSS code at a place so that it loads after all other css is loaded ( therefore taking maximum priority )
#media only screen and (max-width: 767px) {
#Top_bar .logo {
text-align: left;
}
#Top_bar .top_bar_left {
float: left;
width: 80% !important;
margin-top: 10px;
background: none !important;
}
.header-classic #Top_bar .top_bar_right {
top: 15px;
float: right;
}
}
I have strange problem with website responsiveness.
When on desktop resolution no horizontal scroll appears at Chrome.
When i resize it to lower resolutions 400px width and less the horizontal scroll appears.
I think some element is forcing width bigger than actuall screen size but i cant find it!
Please help.
Here is website link
I checked your code,
You have to get rid of this code in your footer styles. Your margin-right is making your content overflow.
Try using padding, or something similar instead.
It appears you are using bootstrap for that.. So the best way to do this would be to overwrite this by creating a
#footer > div.row {
margin-right: 0 !important;
}
or if you have bootstrap locally then you can probably delete from there. But i just overwrite it using `!impornat
.row {
/* margin-right: -15px; */
margin-left: -15px;
}
I designed a responsive web page for tutorial and I have a trouble with unnecessary padding.
http://zinzinzibidi.com/res
In this page when you decrease the your browser window resolution, you will see the horizontal scroll bar (overflow-x) in some resolutions. I am trying to understand but I can't fix this trouble for a few days.
Here is an example picture of my trouble:
My CSS codes here: http://zinzinzibidi.com/Areas/res/Content/css/style.css
My media screen codes are
What am I doing wrong?
It appears that an inner item is causing the issue. Remove the padding from #header-main-buffer and it should go away.
line 515 of your file:
#header-main-buffer {
width: 300px;
padding: 0 10px; <- this is your problem. remove it and it will be fixed
...
I checked your code and it might be your <div id="header-logo"> the one creating that extra padding.
Since the img has a fixed width of 300px on screens smaller than tit will create an extra padding to the right so it fits the screen.
Try reducing the
#media screen and (max-width: 479px) and (min-width: 320px) {
#header-container {
width:;
}
}
EDIT
Basically check all the img that you're using so you make sure their width is appropriate and they fit the screen.
I'm trying to create a sticky footer in bootstrap, and am using the default template provided here: http://twitter.github.io/bootstrap/examples/sticky-footer-navbar.html
It appears the example provided has a problem; when the page is viewed through a smaller resolution, the navbar collapses (as it should), but then the 60px padding that originally kept the content from hiding under the navbar creates a large gap between the navbar and the content.
Any ideas?
Thanks
One easy way to change this behaviour is to remove the 60px padding when the navbar collapses. Something like this should do the trick:
#media (max-width: 979px) {
#wrap > .container {
padding-top: 0;
}
}
You might have to change the div names to match your naming.
Good luck!
it should maybe be
#push, #footer {
min-height: 60px;
}
instead of just height