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%;
}
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 have an alignment issue, rather height issue.
Please look at
http://www.hashgurus.com
- in desktop version the header - precisely where the logo is positioned and the menu looks good. On smaller devices/mobiles the logo height becomes too large and becomes clumsy.
I tried changing some parameters to change the height of the div tag but its causing other alignment issues. Any pointers on how to fix this one?
looking at your css you need to add this to the media query:
.header_3 .menu_wrap .logo {
margin-bottom: 0;
}
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;}
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.
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).