I've positioned my Social Media Div to the right of my Review Div: http://jsfiddle.net/eYQWE/
The problem: the social media buttons within My Social Media div won't stay in a single straight line. They keep dropping below my Review Div.
Any suggestions?
The problem is that the iframe frome facebook gets a width of 450px, wich stretches its parent and makes the buttons appear beneath the text. Try setting a fixed width to the wrappers, something like this:
#social li {
display: inline-block;
text-decoration: none;
padding: 0 0 0 33px;
float: left;
max-width: 80px;
overflow: hidden;
}
I added the last 2 lines and it seems to work just fine now.
An even better solution would be to drop the iframes entirly and write your own buttons using the API provided by Facebook (or Twitter and G+). This would allow you to style them entirly to your wishes and would probably improve your pageload times. But perhaps that is taking matters a bit to far...
The updated fiddle can be found here: http://jsfiddle.net/eYQWE/2/
It's the facebook iframe, width is set to 450px, if you can change the generated code you can fix it there, otherwise you have to reset with css/js. Firebug will be your best friend in this case (if it's not already).
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 don't stumble upon browser-related issues when I'm working with WordPress development very often, but I'm having trouble finding the reason for this strange, although simple bug with Firefox/Edge (working OK with Chrome; not tested in other browsers).
The website: http://stitchwear.com.br/
In the home page, we have several products showcased. In the last column, where 3 products should be aligned in the same row, the first product stays on the right side and the other two go down to a new row. Checking the code with developer tools from Chrome/Firefox, there's no different classes or styles added to these products that would be causing the issue. The error also only seems to happen in bigger screens, so not a responsive issue.
All products are aligned left using an unordered list in CSS, with a fixed width of 300px for each product and a fixed width of 900px for the ul tag. No margins or paddings for li elements.
As I don't find this kind of browser-related issue, I don't know where to look at. I didn't develop this website but I'm working on fixing this issue. It doesn't use Bootstrap either.
Hope you guys can give me some clues.
Thanks!
FWIW, i loaded the page in Chrome and FF, and FF definitely screws up the list and I don't know why. I tried to create an MCVE demonstrating it, but was unsuccessful.
However, a fix is: Instead of float:left for the list items, use display:inline-block, and change the width of the ul from 900px to 908px to accommodate the extra space created by the inline block.
Your product images are not of same size. That is making list items height different and layout is being messed up. Keep your images same sizes or you can apply this css.
.product-thumbnail {
overflow: hidden;
position: relative;
}
.product-thumbnail::before {
content: "";
display: block;
padding-top: 133.33%;
}
.product-thumbnail img {
position: absolute;
top: 0;
width: 100%;
}
The problem is with the photography website I have created for some reason just on the "Contact" and "Bio" pages. It is only when the screen is resized so you will need to shrink down till the layout changes. Then when you hover over the menu tab "Albums" and the drop down menu appears it is pulling the content under it up slightly. It also creates a margin on the right that creates a scroll bar at the bottom. I have been combing through the CSS over and over trying to tweak things, can't find a solution though.
The website is:
"Bio" http://www.sairjanephotography.co.uk/bio.html
"Contact" http://www.sairjanephotography.co.uk/contact/contact.html
Also I just noticed the actual contact page drop down menu is hard to actually get onto with the mouse where as the Bio one isn't.
Any help appreciated
You can ditch the javascript approach, and just use CSS. Something like this would work; just apply left: 100% to get it on the right instead of below.
Edit: sorry for not reading the problem earlier. Your problem is that you have defined width on your ul element. On line 277, you have:
/*Re-centres the nav menu on phones from tablet*/
#media screen and (max-width:37em){
.menu ul{
font-size:4em;
width:18em;
}
}
But if you remove width: 18em, all is well, it appears.
To clarify on this, you shouldn't be setting fixed widths if you want to acheive a good mobile design. Instead, try to use tricks like text-align: center (coupled with display: inline-block, and display: block; margin: 0 auto;.
I think the other part of this question had to do with the hiding of the title. If you still want your header to show, you could either change its z-index to anything higher than the dropdown, or you could use an ajacent selector to give the main content a margin-top when the dropdown is active.
For example:
.menu.open + main {
margin-top 3em;
}
/* Add some transitions for show possibly */
main {
transition: 1s ease margin
}
I am trying to build a web page which should appear same in both wide screen as well as in small screen monitors. I was trying to keep it fluid but in the mean time strange blank space appeared at the right side of the web page.
Strange thing is the blank space is outside the viewport but it makes horizontal screen bar to appear and once scrolled to Right most side, one can see the white space.
Code can be seen here http://jsfiddle.net/FW98q/
MY gut feeling is the problem is at:
#Navigation_Container {
background: #3399cc;
height: 50px;
//width: 960px;
//margin: 0 auto;
}
Help is much appreciated.
Also any tips on how to style the web page so that it remains consistent over screens. Comments on the design are also welcome..:)
I found the issue....Its in the class '.notice' that is in the footer...if you remove
position:absolute;
It works just fine. :) Check it out! Fiddle
I used the element inspector in firefox at saw that it was the only element that was extending beyond the page.
Also, if you need it positioned absolute on the bottom as you had it, make sure also put the left postion as well like this
position: absolute;
bottom: 0px;
left:0px;
Here is an example with the left:0px added
FIDDLE
#page_container, #Header {
width: 960px;
}
Made sure these two element are the same width as the others if you want them to be the same width.
// doesn't work in CSS and you aren't closing one of your divs. I think it's the content one. Why do you have 3 different footer divs? Your mark up is way too complicated you could combine all three of those and get the same effect.
Taking that just out of the navigation container fixes the white space, but you've done it at least one other place.
add to your css
body{margin:0;}
So I'm aware that this is a confusing question. Basically, I've got two divs at the top of the page that include navigation and a search bar.
I have a full container
#containPage
width:1000px;
margin:0 auto;
}
for the page that is fixed width. This doesn't end until the end, I think, and there are two smaller containers for a layout, both float right and left.
When I resize the page in a browser, the layout at the top moves and changes the positioning, which I don't want to happen.
Any ideas?
here is the link: it's being even screwier right now and has the navigation links way to the right, so maybe someone could help with that too.
http://www.sophisticatedmoose.com/nerdery/
Resizing horizontally in Chrome and Firefox for Mac. If you scroll to the right, I'm supposed to have a nav bar underneath the search page with home, about, news, and contact. Last I checked- and I'm clearing the cache - it was waaay off on the left along with the footer.
Working on an image. I need reputation 10 to put one in. I've got it though.
You have this odd construct in your CSS:
#containPage { /*page I am in you*/
width:223%;
margin:0 auto;
}
The margin setting is fine and sensible but the width is rather, um, strange. The #containPage element is, essentially, the entire page so it is naturally as wide as the browser window, then the 223% is applied and the page itself becomes more than twice as wide as the browser window. Then, all the block elements that are immediate children of #containPage will be over twice as wide as the window unless you specify or imply a width in some other way.
In particular, the #NavRRT element will be too wide and the menu inside #NavRRT will float to the right all the way out of the window and you'll have to scroll horizontally to see it. Similar positioning strangeness happens with #footer.
Start by getting rid of the width:223% on #containPage. The page looks fine in Safari and Chrome if I turn off just that single piece of CSS.
UPDATE: You might want to add another <div> inside #containPage, then add max-width, min-width, and margin: 0 auto to that to keep the main content centered and reasonably sized. Everything that is currently inside #containPage would go inside this new <div>. If you go with this approach then you probably won't need any CSS at all on #containPage, it would just need to be around to help center the "real" page.
You have to remove the margin-left from your nav LIs (it's inherited from li) and remove their widths.
#nav li { margin-left: 0; width: auto !important; }