I have a problem with sidebar of this page. I can not make it go under in the responsive version, especially in the smartphone version. Sidebar remains attached to the contents of the left but does not wrap
This is the link for the codepen
If codepen does not work, this is the link for the website.
archive-posts-w.with-sidebar .archive-sidebar {
display: block !important;
position: relative;
top: inherit;
left: 0;
width: 100%;
max-width: 350px;
bottom: inherit;
right: inherit;
clear: both;
float: left;
}
Html there will certainly be errors because it is a copy of a source of a website wordpress.
There are a few problems here:
Your container .archive-posts-w.with-sidebar has display: table;. Change that to display: block for smaller screens (i.e. in your media query)
The CSS for the part above your sidebar should be like this (for smaller screens):
.archive-posts-w.with-sidebar .archive-posts {
display: block;
vertical-align: top;
width: 100%;
}
And for .archive-posts-w.with-sidebar .archive-sidebar you have a max-width setting of 350px, also inherited from everal other rules, so change this rule (for smaller screens) to
.archive-posts-w.with-sidebar .archive-sidebar {
display: block !important;
position: relative;
top: inherit;
left: 0;
width: 100%;
max-width: none;/* <-- this one is changed */
bottom: inherit;
right: inherit;
clear: both;
}
First add class table td in that td class="test"
td.test
{
display:block
}
#sb_instagram .sbi_header_text .sbi_bio, #sb_instagram .sbi_header_text h3
{
margin:0px!important;
}
#sb_instagram .sbi_header_text .sbi_bio, #sb_instagram .sbi_header_text h3
In that class you have 'margin: 0 0 0 60px!important;' you change that 0px
abd check the devices
http://www.responsinator.com/?url=http://www.alchimieadv.biz/ricette/&device=ipad&orientation=portrait
Related
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 would like to make the main menu full width in below website. It is in wordpress. I am not sure which element to edit in custom css. Thanks.
Main menu image:
Do this:
.top_nav .container {
max-width: unset;
width: 100%;
padding: 0;
}
Unsetting the max-width of that container will mean that if you choose to enlarge the whole page content width, the header will always be full-width without you having to apply a new max-width to match the updated content.
Add below css and check
.top_nav .container {
width: 100%;
padding: 0;
max-width: 1230px;
}
Update the css like
.container { margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px; }
body.header_style_transparent .top_nav {
position: absolute;
left: 0;
bottom: 0;
width: 1230px;
background: #c42953; }
I want to have some list elements that got a dynamically adjusting height via css.
For better understanding: I am inserting via ::before a number that I count via counter-increment (thats the big ones)
Problem is that nothing that I tried so far brings me even close to what i want to archive. If you change the window size everything gets shoven down...
It should look like this:
I tried:
clear: both; on every element (except the li)
height: auto; on every element
I've already read through some posts but nothing really worked for me.
Dont ask why am I trying to get it done with css... ;)
Thanks for any help!
You have an absolute positioning on your image and thumbnail wrapper which is causing huge problems, look at the adjusted CSS below:
.page-id-3606 .product_thumbnail_wrapper .product_thumbnail a img {
position: relative;
clear: both;
}
.page-id-3606 .product_thumbnail a::before {
counter-increment: section;
content: "0" counter(section) "";
font-size: 10em;
font-weight: bold;
position: relative;
/* top: 100px; */
/* left: 50%; */
line-height: 0;
height: 100px;
width: 100%;
text-align: center !important;
box-sizing: border-box !important;
text-transform: uppercase;
color: #464646;
display: block !important;
border-bottom: 3px solid #464646;
/* transform: translate(-50%, 0); */
margin: 0 !important;
z-index: 10 !important;
}
I fixed it with a little help from Rich.
the missing height and top was causing the trouble:
.page-id-3606 .product_thumbnail_wrapper::before {
content:'';
background: url('...');
height: 130% !important;
width: 100%;
position: absolute;
z-index: 1;
clear: both;
top: -65px;
}
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 }
}
My site, http://hivechatter.com/, is super sexy for Firefox, Chrome, IE8, you name it:
But then along comes IE7, who mauls her divs so bad that they nearly run off the screen! And for whatever reason the content within the divs is centered. What the heck is going on here? It seems to be something to do with the way IE7 interprets the left: percentage margins, but I can't figure it out.
For convenience and posterity's sake, below are the relevant portions of my css, with text formatting and other nonsense removed. #container is the overall page container, #blue_box is the main content box, #left and #right are the columns in the blue box, #divider is the white line that separates them, #links is the light blue nav hovering below #blue_box.
#background {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -9999;
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
background: no-repeat #222933;
overflow: hidden;
}
#container {
position: relative;
left: 34%;
top: 10%;
width: 50%;
min-width: 450px;
max-width: 700px;
overflow: auto;
padding: 0;
}
#blue_box {
position: relative; /* so that divider has appropriate height */
width: 94%;
padding: 3%;
overflow: auto; /*needed so that div stretches with child divs*/
}
#left {
position: relative;
float: left;
width: 44%;
margin: 0;
padding: 0;
}
#right {
position: relative;
float: right;
width: 49%;
margin: 0;
padding: 0;
}
#divider{
position:absolute;
left:49%;
top:6%;
bottom:6%;
border-left:1px solid white;
}
#links {
float: right;
width: 16em;
overflow: auto;
}
Change your position from relative to absolute for the container CSS.
Your problem is your image is just there with the container coming after it with a relative positioning.
IE7 is centering your container because you've set your body to text-align:center, then you're setting your container left:34%. IE is just adding those together for some reason. This is probably why your stuff is being centered in IE. You could do a conditional stylesheet for IE7 and remove the text-align.
Can't test at the moment if this will solve the issue but using margins on the blue box to position it instead of position: relative usually makes things a lot easier in the dark world of ancient Internet Explorers.