I am building a mobile app and encountered an issue where the bottom part of my screen is covered up by the bottom navigation screen.
Screenshot of issue
I tried to add a margin bottom as below:
.dashboard(style="margin-bottom: 58px; margin-top: -10px;")
#region
#menu-region
The strange thing is that this works if I run the code on my desktop but does not work when it is run on the mobile phone.
Question: How can I update the CSS so that it allows me to add a padding at the bottom of the screen so that the bottom part of the screen is not covered by the nav bar on the mobile?
CSS for bottombar
.bottombar {
background-color: $theme-color;
height: 58px;
width: 100%;
position: fixed;
bottom: 0px;
z-index: 1000;
.footer-icon {
padding-top: 17px;
text-align: center;
width: 20%;
}
table {
width:100%;
height: 100%;
border: 0px;
padding: 0px;
border-spacing: 0px;
background-color: transparent;
tr {
td {
width:20%;
background-color: transparent;
text-align: center;
position: relative;
}
.menu-corner-color {
background-color: #1189b6;
}
.menu-side-color {
background-color: #006990;
}
.menu-middle-color {
background-color: #004965;
}
.circle {
}
}
}
}
Jade for layout
.footermenu
.bottombar
table(style="width:100%; height: 100%; border: 0px; padding: 0px; border-spacing: 0px; background-color: ")
tr
td.notifications.menu-corner-color
i.material-icons.md-light.md-24
span.badge_count.hide
td.coach_chat.menu-side-color
i.material-icons.md-light.md-24
span.badge_count.hide
td.log.menu-middle-color
i.material-icons.md-light.md-24
td.community.menu-side-color
i.material-icons.md-light.md-24
span.badge_count.hide
td.profile.menu-corner-color
i.material-icons.md-light.md-24
Related
I am trying to get my top menu to be exactly full width of the screen at all times. Sadly, while it works OK on desktop, it keeps extending beyond the expected width when on mobile.
To give some context: I'm trying to build a child theme of the "Rookie" theme (https://wordpress.org/themes/rookie/).
My goal at this point is to replace the default menu of the theme with a top bar, on which I want the burger menu on the left, logo in the middle and the search button on the right.
This is already done, but for a reason I do not understand, when testing on mobile, the top bar is exceeding the expected 100% width. This can be observed when trying with "Phone 6/7/8" of the Chome dev tools. I also tried with a physical device and got the same result.
The page is https://gornik2.kosimus.eu/
Picture from the dev tools
I spent several hours trying to figure it out and I essentially ran out of ideas at this point. I defined the width to 100%, 100vw and so on, tried max-width, checked parent elements and made sure that the width is not increased anywhere.
Pretty sure there is something incredibly stupid and small I am missing. Ideas would be greatly appreciated.
Thanks!
PS There is a bunch of other issues as well on that page (colors etc.
- please just ignore those).
/* Make sure that the header is full-width */
.site-header {
width: 100%;
}
#masthead {
width: 100%;
}
/* Get rid of the horizontal unordered list menu. Always use the mobile-like hamburger menu. */
.main-navigation ul {
display: none;
}
.main-navigation.toggled .nav-menu {
display: block;
background: #000000;
}
.main-navigation li {
float: none;
}
/* Menu bar to the top */
.main-navigation {
display: block;
position: fixed;
top: 0;
height: 65px;
width: 100%;
}
/* As the top bar is 65px high, the open menu should have exactly that margin, so that they don't overlap */
.main-navigation.toggled .nav-menu {
margin-top: 65px;
}
/* Display navigation over other stuff */
#site-navigation {
z-index: 100;
}
/* Top bar styling */
/* Hamburger menu */
.main-navigation .menu-toggle {
/*Send the whole button to the left*/
display: inline-block;
width: 20vw;
height: 65px; /* Set the height of the whole top bar to 65 pixels */
background: #ffffff;
position: fixed;
top: 0;
left: 0;
}
.main-navigation .menu-toggle .dashicons {
display: inline-block;
color: #000000;
position: relative;
left: 27%; /*Required to be positioned properly on the white bg*/
font-size: 4rem;
vertical-align: baseline;
}
/*White BG for the hamburger button*/
.main-navigation.toggled .menu-toggle {
background: #ffffff;
}
/* We're using the full screen search from a plugin, so the field here is not necessary */
.main-navigation .search-form .search-field {
display: none;
}
/* Search button */
.main-navigation .search-form .search-submit {
display: inline-block;
width: 20vw;
height: 65px;
background: #ffffff;
color: #000000;
position: fixed;
top: 0;
right: 0;
padding: 8px 16px;
}
.main-navigation .search-form .search-submit:hover {
background: #ffffff;
color: #000000;
}
.main-navigation .search-form {
display: inline-block;
margin: 0;
}
.main-navigation {
background-color: #1a754a;
}
/* Logo centering and styling */
.site-branding {
display: inline-block;
margin: 0;
padding: 0;
position: fixed;
top: 0;
left: calc(50% - 32.5px);
z-index: 110;
}
.site-logo {
margin: 0px;
float: none;
}
.site-logo img {
max-height: 65px;
}
.site-content {
margin-top: 65px;
}
The pseudo element (:after) added to th tag of the LEAGUE TABLE is causing this issue. This issue can be fixed if the position value changed from "absolute" to "relative".
.sp-data-table .sorting:after {
content: "\f156";
color: transparent;
/* position: absolute; */
position: relative;
}
Screenshot
I have a website I am working and the form isn't sitting in the right place it keeps shifting and moving I spoke to tech support they gave me some code it worked for a bit now it's off again can someone please help.
This was the code:
button.et_bloom_submit_subscription {
float: right;
position: fixed;
top: 7px;
right: 310px;
}
.et_bloom .et_bloom_form_content .et_bloom_popup_input {
width: 25%;
}
button.et_bloom_submit_subscription {
width: 21% !important;
}
.et_bloom .et_bloom_inline_form {
left padding: 60px;
}
.et_bloom .et_bloom_inline_form {
margin: 0;
}
.et_bloom .et_bloom_header_outer {
display: none;
}
#media only screen and (max-width:1100px) {
.page-id-453 .et_bloom_form_content {
width: 100% !important;
margin: 0 auto !important;
}
.page-id-453 .et_bloom_form_content .et_bloom_popup_input {
width: 25% !important;
margin-right:2%;
}
.page-id-453 .et_bloom_form_container button {
width: 45% !important;
padding:13px;
top:auto !important;
left: auto !important;
margin: auto !important;
float: right !important;
}
}
And this is the website www.askleewellard.com (form is right below the graphic).
I manage a WordPress site, and I'm having some trouble applying a custom background behind the main content div. Here's a link to the site: AccelePedia. You'll see that the main content div is set to 85% width, and on each side is white space. I've tried everything, but I can't apply a background to that white space. I've included the code below pertaining to the div we're looking at. Any help here would be greatly appreciated. :)
If it helps at all, I'm running Wordpress 3.6.1 with the 2013 theme. (Which I have modified.)
Thanks!
/**
* 3.0 Basic Structure
* ----------------------------------------------------------------------------
*/
body
{
background: url(http://accelepedia.com/accimages/background02.png) repeat-x top left;
width: 100%;
}
.site {
background: url(http://accelepedia.com/accimages/background02.png) repeat-x top left;
border-left: 1px solid #f2f2f2;
border-right: 1px solid #f2f2f2;
max-width: 1600px;
width: 100%;
}
.site-main {
position: relative;
width: 85%;
margin-left:auto;
margin-right:auto;
margin-top: 5px;
border: 5px solid gray;
background: #000;
z-index: 1000;
}
.site-main .sidebar-container {
background-image: url(http://accelepedia.com/accimages/background02.png)
height: 0;
position: absolute;
top: 40px;
width: 100%;
z-index: 1;
}
.site-main .sidebar-inner {
background-image: url(http://accelepedia.com/accimages/background02.png)
margin: 0 auto;
max-width: 1040px;
}
The background image does not exist:
http://accelepedia.com/accimages/background02.png < this file returns a 404
When I set the following it works:
body {
background-image: url(https://www.google.com/images/srpr/logo11w.png);
}
I've coded my website for all browsers but of course IE has issues. Specifically only IE 7. I'm hoping to find a resolution to why it's behaving the way it is with two issues and what I can add so IE will display it properly.
My submit buttons are aligning to the bottom of their containing divs.
CSS for the SUBMIT button for the SEARCH field
#searchform { /*container widget */ position: relative; left: 15px; width: 97%; height: 30px; background-color: #f3f3f3; border: 2px solid #742222;}
#searchform label { display: none; }
#searchform input#s { width: 75%; height: 20px;}
input[type=text],input#s { margin: 0 10px 0 0; width: 60%; }
#searchsubmit{ position: relative; float: right; width: 30px; height: 30px; text-indent: -999px; background: url(http://averylawoffice.ca/img/SEARCH-submit.jpg) center; border: 0px;}
This CSS works in all browsers but IE version 7. Is there a way to make it top align without having to position absolute?
I've managed to move the SUBMIT button up (to the correct position) by left-floating the text-box.
.subscription_email {
...
float: left;
}
Same goes for the search text-box:
#s {
...
float: left;
}
By making those changes, the resulting presentation will be exactly the same as in Firefox.
UPDATE: Here's a jsFiddle.
I want it to look like this:
... but it looks like this:
The #container is horizontally centered, and must stay so. Can't seem to get this right...
this happens when you float boxes side by side, one box to the left, the other to the right, both having width:50%. But padding, margins and border unintentionally increase the width of the boxes causing them to be more than 50% and forcing the right box to move under the previous box.
try setting static width to the boxes (will need calculation)
http://jsfiddle.net/fuYYv/
Bryan Downing in the comments gave me a clue.
I added
footer #container {
position: relative;
top: -XXXpx;
}
Works perfect. Big thanks to you wizards :)
This should be useful for others. jsFiddle with answer. Code below:
header, #container, section, footer, footer img#iphone { display: block; }
header {
background: url('images/header.jpg') repeat-x;
height: 160px;
border: 5px solid #aa3;
color: #aa3;
}
header img#logo {
margin: 0 auto;
}
#container {
width: 550px;
margin: 0 auto;
overflow: hidden;
border: 5px solid #33a;
color: #33a;
}
section {
float: left;
width: 310px;
height: 200px;
border: 5px solid #3a3;
color: #3a3;
}
footer {
background: url('images/footer.jpg') repeat-x;
height: 150px;
border: 5px solid #aa3;
color: #aa3;
}
footer #container {
position: relative;
top: -320px;
}
footer img#iphone {
float: right;
height: 400px;
width: 204px;
border: 5px solid #a33;
color: #a33;
}