My page is displaying properly on desktop browsers, but not on mobile devices. The url is [removed after question solved]. The logo in the top left is absolutely positioned. The divs underneath the header are also absolutely positioned with left: 0. Currently div#page has position:relative, but I've tried putting the relative positioning on many wrapper divs with no success. I also have php output buffers in each individual php file (e.g. header.php, body.php).
The slideshow uses a WordPress plugin that calls the jQuery Cycle plugin, and also declares absolute and relative positioning, so it may be causing confusion as to what is relative and what is absolute. But I've tried attaching relative and absolute positioning to elements in seemingly every combination and still have had no luck.
p.s. I know the CSS is a mess, I plan on going through and refactoring after I figure out this positioning issue.
Looks like you have a media query in there that is adding the following css at a certain break point that would be affecting the mobile size.
#main #content {
margin: 0 7.6%;
width: auto;
}
If you could clarify exactly what you feel is wrong with the mobile version it would help us give a better answer. Are you looking for the description text to bump under the slider images?
Related
I'm editing an existing Wordpress theme (created child theme) and I'm having formatting issues. Both on mobile and desktop versions of the website.
My first issue is that the first post loads under the header-logo container sometimes depending on browser size, I notice this happens a lot in mobile devices. The "PROMO" post goes missing.
I've increased both the margin-top & padding-top properties but it doesn't seem to resolve the issue. Do I perhaps have to update the positioning of the container div? If so, what would be the appropriate way? Been reading a few articles and trying a lot of css edits but I feel like I'm just going in circles.
Affected site: http://posteshare.com
Mobile view: http://www.responsinator.com/?url=http%3A%2F%2Fposteshare.com%2F
The other problem I'm encountering is that media embedded on posts are floating on top of my "fixed" header instead of the other way around. I've modified the "position" property to absolute but it seems to break the formatting of the whole page? Been at this for a couple of hours and it's driving me nuts. Any new insight is appreciated. I've ran out of ideas to try.
]3
To make the header appear on top of the other comment, there is a z-index property, as said in the comments by #Milan. Basically, what you have to do is...
#header-container {
z-index: 999;
}
/*all the other elements on page except body*/ {
z-index: /*less than 999*/;
}
With this, the header should appear on top of every element on the page.
If your navigation is 110px height, maybe try adding height + about 20px margin offset to the container like so:
.container {
margin-top: 130px;
}
Add clear: both to .container on grid.css line 3
I am having a problem with my positioning. All of the items in my website are absolute positioned. They look completely fine when my web-brower is at it's full size, but when I shorten the (safari) browser then some items in my website move over others. At first I thought the problem was that absolute positioning does that automatically, but when I looked into it further I found some of my items that were in absolute positioning stayed at the same place even when my web page got smaller. It looks extremely bad and i would really appreciate help with my problem. How do I get things on my website to stay in the same place even when the web-browser shrinks.
#imagerotator
{
position:absolute;
right:118px;
top:65px;
}
I'm trying to create some cool CSS animated clouds. It works perfectly on modern desktop web browsers, but has issues with MobileSafari on iOS 7.
The code I'm using involves cycling clouds from margin-left 0% to 100%, to -100%, and back to 0%. This causes the browser window to be stretched, with a horizontal scrollbar appearing at the bottom. overflow-x: hidden solved it.
However, MobileSafari doesn't seem to support overflow-x properly, resulting in a stretched screen with an unneeded scrollbar on iOS. The clouds currently have position: absolute to move independently of each other, but I'm noticing setting position to relative fixes this issue on iOS. However, that brings me back to the original problem that absolute position fixed, which was randomly overlapping clouds. I'm wondering if there's anyway to have elements move independently of each other without absolute positioning.
The website is http://team178.github.io/DreamNext
Let me know if this explanation needs to be clearer. Thanks.
The solution was to make a container with relative positioning. MobileSafari stopped stretching after that.
Is it even possible? I made a header for my site position at "fixed". The i also have an image positioned at "relative". Whenever I scroll the site.... I noticed that the image was layered "above" the header. Even the twitter profile widget i placed was above the header. They both overlap the header and i dont want that. Any idea on how to resolve my problem? please HELP!
Btw.... ive heard that "fixed" is buggy esp in Android, where I am making my site.
You'll need to use z-index to set the layering, something like this:
.menu {position:fixed; z-index:99999}
.content {position:relative; z-index:1}
Then you can fine tune it by using numbers in between.
For a school assignment I was required to redesign a website for a buisness.
I had only ever mucked around with css/html before and this is the first time I had written it for a full website.
The issue I am facing is the positioning of 3 divs is correct in google chrome, but in IE and firefox the divs are incorrectly positioned.
http://letsmine.info/mnpctech/index.html they are the twitter, facebook and checkout symbols on the right of the menu bar.
As this is the first time I have written CSS and HTML I presume this is a silly mistake and I am hoping that you can guide me into the right direction.
Also on the store page I need to layout the products with a picture and name like they are here http://www.mnpctech.com/MnpctechBilletFanGrill.html . Should I create a table and just put the images and title in there? just looking for some advice.
You need to add the following properties to #checkout, #facebook and #twitter:
display: inline-block;
float: right;
and remove the following properties from each one:
position: relative;
left: 980px;
top: -49px;
The page should then display properly in all browsers.
Make sure that you use floats and know your way around the "display" property well for positioning, I always try to stay away from relative positioning as it's a bit unreliable.