On this website, when the viewport width is reduced to 595px or below, the following CSS should apply:
#media (max-width:595px) {
#header-left,#header-right {
display: block;
width: 100%;
float: none;
}
}
The browser is recognising the CSS, and it appears active, however, #header-left (which contains the logo) is not 100% wide, or is #header-right (which contains the phone number).
That is, #header-left & #header-right still try to take up half of the width, and appear side by side, instead of above and below each other.
Why is this occurring? Thanks.
Remove position:absolulte; from #logo {position: absolute;top: 0px;left: 0px;} and remove from #menu Then your code works fine.
You should override the following commented rules in your css specific to the 595px size:
#logo {
/* position: absolute; */
/* top: 0px; */
/* left: 0px; */
}
#header-right {
width: 50%;
float: right;
padding-top: 8px;
/* text-align: right; */
}
#menu {
/* position: absolute; */
/*top: 80px;*/
/*left: 0px;*/
background: url(images/menu-bg.png) no-repeat;
width: 960px;
height: 55px;
}
Note: Override the commented rules
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'm using a CSS based image-map, which I want to display correctly whatever the size of the browser window. Of course there are actually multiple links.
My HTML ...
<div id="sitemap" >
<img src="img.jpg" class="center"/>
<a href="url1.html" id='id1'></a>
</div
And the CSS ...
#sitemap img{
max-width: 100vw;
max-height: 100vh;
position: relative;
}
#sitemap a {
display: block;
position: absolute;
}
#sitemap a:hover {
background: rgba(255, 255, 0, 0.5);
border-radius: 20px;
}
a#archive {
top: 48%;
margin-left: 14%;
width: 20%;
height: 15%;
}
This works great in a tall, narrow browser, but when the browser window is wider than it is tall, the percentages consider the dead space in the blank sidebars. How can I make the percentages consider only the actuall image?
So you know the reason.
This is because of the div(id=sitemap)'s width.
How about this one?
#sitemap {
/* for debug background-color: red; */
/* make sure the div width only size of contents */
display: inline-flex;
/* You set position relative to "img", but it semmed doesn't work because it isn't a parent‐child relationship */
position: relative;
}
#sitemap img{
max-width: 100vw;
max-height: 100vh;
/* position: relative; */
}
a#archive {
/* I think it's good enough setting two properties, unless you aren't particular about the details. */
top: 10%;
left: 10%;
}
I have been created simple webpage using html5,css and js.
I have header,menu,slide show,main-content and footer. and also using sticky side-bar
After all coding, slideshow display at the middle of main content and main-content also hidden.
css code for slideshow,main-content and footer:
#wowslider-container1 {
position: absolute !important;
-webkit-transform: translateY(-50%) translateX(-50%);
transform: translateY(-50%) translateX(-50%);
left: 50%;
top: 60%;
opacity: 1;
}
/* clearfix */
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
/* Main ................ */
main {
margin: 20px auto;
max-width: 940px;
}
/* aside */
aside {
float: left;
max-width: 220px;
}
.inside {
background-color: #000;
padding: 10px;
}
#sidebar.sticky {
float: none;
position: fixed;
top: 20px;
z-index: 6;
left: auto;
}
/* main content */
.main_content {
float: right;
max-width: 700px;
color:#fff;
}
/* Footer .............. */
footer {
background-color: #999;
height: 300px;
width: 100%;
}
My page look like this: http://s14.postimg.org/jw2uimt9t/Untitled_1_copy.png
I have lots of file, how to fix my problem, there anyone help me to fix this.
Any help would be highly appreciated. Thanks in advance.
I guess i understood what you need,
most of the div containers that you use don't have css size properties like width and height, but most importantly they don't have a position values in order to fit a html layout structure.
try using position:relative; first on the css for the most important elements of the page.
start first with this default css parameters:
body, html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
then add to your slideshow css main class this
*your_slideshow_class_name_here {
position: relative;
}
after that, things become easier to solve
I currently am using a fixed header for my website: http://www.destinykingproductions.com/test/ I have attached the css I currently have. Anyone have any suggestions on why this is happening?
#main {
background-color: transparent;
margin-top: -40px;
height: auto;
max-height: none;
width: auto;
padding-bottom: 35px;
}
header#masthead {
height: 103px;
background-image: url(http://www.destinykingproductions.com/test/wp-content/uploads/2014/08/header_bg1.jpg);
position: fixed;
z-index: 856;
width: 100%;
margin-top: 0px;
top: 0px;
}
nav.main-navigation {
top: -200%;
background-color: transparent;
z-index: 4670;
}
nav.main-navigation ul.menu li {
padding-left: 17px;
}
nav.main-navigation ul.menu {
margin-left: 18%;
}
#shiftnav-toggle-main {
display: none;
}
Thank you for your assistance!
The comments above are correct - the "sticky" class nav is being added / toggled at some point. When you add 'display:none' to that sticky class, then it is fine on a desktop view. However, it looks like you are using that class for something with mobile because when the screen is resized smaller and back to normal then the side menu area doesn't go away. It looks like you may want to move that sticky class to your 768px media query and/or have it not show on larger screens.
/*normal css*/
.main-navigation.sticky { display: none }
#media screen and (max-width: 768px)
{
.main-navigation.sticky { display: block }
}
Please review my Fiddle Sample.
Click on a calendar day with an event (orange square).
You'll notice that the date box, is at the bottom of the window.
In the stylesheet, there's a snippet like this...
.calendar *{
-moz-box-sizing:border-box;
box-sizing:border-box;
vertical align: top;
behavior: url(pie/PIE.htc);
}
...the vertical-align: top; should bring that box to the top of the window, but it doesn't.
If you add vertical-align: top; to the stylesheet in Chrome, then it works fine.
Not sure why this is... Thoughts?
I seems to be a height issue. Remove height: 100%; from .calendar .c-specific
.calendar .c-specific {
position: absolute;
width: 100%;
height: 100%; <<< Remove this
left: 0;
top: 0;
display: none;
padding: 1em;
behavior: url(pie/PIE.htc);
}
This is the line you need to change:
.calendar .c-holder .c-grid .c-row .c-day .date-holder {
font-size: 1.3em;
position: absolute;
right: 5%;
bottom: 5%; /*** CHANGE THIS TO TOP ***/
behavior: url(pie/PIE.htc);
}