When viewed in a mobile phone in portrait mode, images are displayed two columns per row with each image container having a width of 50%.
Sometimes though, you only get one image per row. It seems totally random!
If you flip the phone to landscape mode, the images are displayed 3 columns per row and everything works fine.
Here's an image so you can see what I mean:
As you can see the cobra glove is all on its own! The problem can be reproduced in Firefox if you resize the window so you only get 2 images per row.
If you go to http://www.snowrepublic.co.uk/ and hit the 'switch to mobile' button at the bottom of the page (black mobile phone looking icon) then select the 'gloves' category you can see for yourself. The strange thing is, if you hit the 'body armour' category, the exact same layout works perfectly.
Your issue is caused by the fact that your .centeredContent element has no height and when there is less content in one of the boxes then the box below it jumps up a little bit ( which is the normal behavior for floated elements ).
To fix it give the .centeredContent a height that will accommodate the most possible content. In your case 260px seems to be enough:
.centeredContent {
...
height: 260px;
}
Related
I'm building a webpage for a client that I inherited from another developer. The link is: http://up8.431.myftpupload.com/. The client would like the phone number and the social icons in the top bar to display in the same style across all devices:desktop, tablet, and mobile. She doesn't like how when the display gets small enough the phone number and social icons stack on top of each other. That's fine but if there's no room to display them left and right but if there is, she would like to keep the same style. Problem is, I can't figure out how to make that happen.
Upon inspecting the element, I notice that each block has a width of auto, or whatever it needs to fit in. I've tried giving each block a display:inline rule in the hopes that they would take on the content width and align left to right and then I can just float the social icons to the right.
Tried something like this:
#top-bar-content, #top-bar-social
{
display:inline;
}
AND
.top-bar-left, #top-bar-right
{
display:inline;
}
What I hoped would happen is both blocks would display inline, back to back and I could just float them left and right respectively. What actually happened is the phone numbers changed its width to fit the content and floated itself to the left exactly how i wanted it to. The social block however, did not. It lost its dimensions; upon inspecting the element I find its width and height are 0x0. It remained in the same spot. Like I said, in my head I expected it to adopt its content width and sit right next to the phone number.
I'm sure this is just a noob error and I'm just not seeing what's in front of me. I really appreciate any help in advance.
I would change the parent div that contains both the number and social icons to display:flex. Then add justify-content:space-evenly or space-around or space-between (experiment between them) to the same parent element.
So you will have to use a media query to apply this for mobile devices only. When this is applied on desktop devices there is some interference from other classes and "::after" pesudo code.
#top-bar-inner {
position: relative;
display: flex;
justify-content: space-evenly;
}
This will do the trick
I have my own css with #media queries. Sometimes (if I scale the size of browser up and then shrink it back) the page has strange margin right (the navbar is static-top => maximized):
All element's outerWidth(true) are max of the navbar's width. Even window.outerWidth = 400px. The page on the screenshot is about 600px
Where could the white field right come from?
If I shrink the page back slowly - this field is just about 10px, not about 200px like on the screenshot. Or even if very slow -> no such margin at all. If the page is opened in the tight (small) browser window, there is no problem. So the problem (with Google Chrome) is in resizing the browser window. In FireFox the problem is also static (slow shrinking the browser window creates the "margin")
Here is screenshot from Safari: <body> element selected, so the strange white field is right.
Update 1:
deleting my custom css doesn't effect. Still the same issue.
Update 2:
the problem is caused by the file chose input field on a button below. How shrink it to 0 size?
Update 3:
solved: add display: none; to the file input field
just add display: none; style to the file input field
On several of my pages (currently the site is under development), some weather info will be shown: LINK
CSS Problem Description: under the headline WETTER you can see 4 boxes. One is displaying weather from today (HEUTE) and three boxes underneath display the weather from the next days. As you can see, the 3 small boxes are not exactly adding up to 100% framewidth. Also, the uppor wide box is of a slight different width.
--> how is is possible to reach the following?
a) the 3 boxes together to add up to the exact same width as the wide box above WHEN USING A WEBBROWSER / IPAD in landscape view, and AT THE SAME TIME
b) to have FOUR boxes underneath of each other (with 100% pagewidth) when browsing the page with an iPhone/Android. Looking forward to any hints you may have.
I think I have understood what you wanted.
I have made a rough demo at: http://jsfiddle.net/Txjh5/
Used an overall container to simulate your framewidth - this has a max-width.
The boxes are at a percentage to match the top box but using margins I have created gaps between the boxes.
.last {margin-right: 0;}
Removes the margin for the last box.
A media query is used for the smaaller screen size to force each box to 100% width.
Sorry if I have misunderstood the question, but have a look at the demo as that explains things better than I can!
I am setting up a Magento website and purchased a theme from Themeforest for Magento.
I then added a background image to the theme instead of the default white colored page background.
Now what seems to be happening is the entire sides main div becomes pushed over the the right, but only when viewing in some browers such as Chrome and only when you are viewing the site on a large sized screen. To be more specific on my 18" PC monitor, using Chrome, FF, and IE the site looks fine, but when an associate goes to look at the site and he has a larger monitor, he says the site looks different in Chrome, FF etc.
Also, there is a mis-alignment as seen in the below screenshot from him:
http://bit.ly/QnlrVA
However, I can not reproduce this and can not even figure out the css issue.
The site if people can look and give feedback is at http://bit.ly/R1RV8S
The other issue is that when you view a specific category's product listing page, the products listing becomes right aligned. As a result, the normal right side column boxes (the compare products boxes etc) drop down to a new row instead being next to the product listing. This happens on both my computer monitors as well as everyone elses, and in all browsers.
For the background - you just need a wider graphic. like > 1600px. Your current background image is just too small to cover wide screens. you could also set the background-color prop to "black" or whatever color you need (some kind of dark blue). Or set it to repeat.
As far as the right column issue goes - go into
catalog -> manage categories -> <your category> ->design ->custom design and try one of the two column layouts (probably 2 column with right bar).
in your theme the 'col-wrapper' rule + the 'right-column' is greater than your overall width, so its bumping it down. One of the other layouts may fix this... or you can attempt to change the values for that column. (note that you make make unintended changes by doing this - so test your theme thoroughly).
I dont have a big screen to test it out on right now , but this should help:
body
{
background:url(../images/stymulus_bg_pg.jpg);
font:12px/1.55 Arial, Helvetica, sans-serif; color:#666;
text-align:center;
background-repeat:no-repeat;
position:absolute; /*this */
left:0px; /* and this */
width: **set to the width of the background image , it shouldn't strech***
}
This will set your whole body absolutely positioned to the left , and it will also stop anything from comming outside of the body, unless something intentionally tries to go outside it's parent.
I am stuck on how should I cope with the screen resolution problem ....
If I design for High resolution(1280px wide) a very long horizontal scroll comes up on low resolution monitors
If I design for low resolution the website seems to utilize jus a little space on the browser
please guide me how to get around this problem any help would be appreciated thanks
There are several suggestions...
Design your site to center everything horizontally, along with designing with fixed widths. Then make sure that the most important part of your content stays in the center. Background images can fill the background area without causing a horizontal overflow (the scrollbar being shown).
Use a design that fills 100% horizontally and make placements based on percentage width's. This may be difficult depending on your design but if you use some fixed width aspects from #1 that can help.
Use conditional CSS loads. Only recommend this if you really need very different layouts for different screen sizes (like mobile sites). You can use Javascript to get the document.body.clientWidth and document.body.clientHeight to get the current window size and load something based on this. Remember though... a user can resize the screen so it won't be as great as #1 or #2.
Google for "Responsive Web Design"
U have two choices:
1-Make your layout width about 980px. so that users with 1024 resolution and higher will see all the screen without scroll.
2-Make your layout 100% width. without specifying constant width for your elements in pixel set their width in percent. so that every body with any resolution will see the whole page without scroll bars.
I had this problem before...
CSS can't detect screen size, but Javascript can. I don't remember how, though. But it can tell you what size does the browser window have. Depending of this size, you can then link to a CSS or another.
I always use the rule of designing for the 978px Grid.
#container {
width: 978px;
margin: 0 auto;
}
This means it will fit in browsers down to 1024x768 and display centered in higher resolutions.
screen resolution problem is not solved by any margin , padding ,absolute and relative when it comes in to body element .....
this is one of solution which i can prefer for one of case :
use offset in window resize function to another element from which you want to alignment (offset top and offset left)
example :
$(window).resize(function () {
var p = $("#divfromwhichyouwantalignment"); var offset = p.offset();
$(".element1toalign").offset({ left: offset.left });
$(".element2toalign").offset({ left: offset.top + 350 });
});