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.
Related
In iOS 15, Safari changes the behavior of the address bar. It floats somewhere near the bottom of the page.
This can greatly affect the design and user experience of the page.
Are there indicators to detect the address bar, know when it’s present and know its location?
Pad your webpage at the bottom using the environment variable safe-area-inset-bottom like so:
body {
padding-bottom: env(safe-area-inset-bottom);
}
This session by Jen Simmons goes over how to deal with Safari's new address bar: https://developer.apple.com/videos/play/wwdc2021/10029/ (see from 16:44 min)
The floating tab bar is considered to be beyond the lower edge of the Safe Area. You can get the Safe Area’s inset from the viewport’s bottom in CSS using env(safe-area-inset-bottom).
More about supporting the Safe Area in WebKit: https://webkit.org/blog/7929/designing-websites-for-iphone-x
The behavior for this is changing a lot. I recommend adding a DIV like this to your page to play around:
<div style="background: red; color: white; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)">Hello!</div>
This will give you the word Hello! in a tight red box with the
four safe margins applied. You'll see these margins wherever on the page this div is - you don't need to make it a footer or header. It's a very good aid to visualize what's going on.
As of Safari 15 current beta there is :
No longer a floating address bar.
No longer any value set for env(safe-area-inset-bottom) to avoid interfering with the bottom address bar.
env(safe-area-inset-bottom) is set for the purpose of avoiding the home screen indicator bar.
Setting 100vh for the height of your page will prevent the address bar appearing at all unless somebody clicks on the site name at the bottom of the screen.
However, with 100vh it's possible for items to hide underneath the bottom bar at this time. I'm really hoping they'll fix this behavior to set the safe area.
So for the red box to actually appear to have any padding you must:
Switch to 'Single Tab mode' (address bar at top) in Safari settings.
Scroll the page up and down to make the address bar show and hide.
Notice the box will have bottom padding only when the home screen indicator is visible (the white bar at the bottom of the screen).
You can use ObserveResize and Css for solve attaching absolute dom element on the bottom of your screen.
There is the sample: JavaScript es6 + css solution
A different solution to this issue (that works with 100vh) that I've had success with is:
min-height: 100vh;
min-height: -webkit-fill-available;
So far you can't really detect the size of the address bar because the env(...) inset variable was cut in the final release. But! The address bar does affect positioning on the page.
I'm not exactly sure how it determines what elements to move, but page elements can react to it. For example, take a look at Twitter's navigation bar when viewing twitter.com on a mobile device.
If you want similar behaviour ⤵︎
Make a div with fixed positioning
Set it's bottom to 0
Be careful about setting height of the fixed div to 100vh as I think this squeezes it out of the address bar's reactive area.
Please, anyone, post comments and updates about this issue as it's changing frequently.
I'm using elementor for the first time and I can't remove the space between widgets, you can see the small line of 8px in gray colour with a gradient inside (thats my picture). When I put this picture Elementor adds the white space above and below the line, I thought this is added only at desing time but when I update and see in the browser the whites spaces continues here. Of course the picture in the media gallery don't have this white spaces... I don't know what to try, the only trick is to force the margins but then when the screen changes it's overlapped (this is not a solution). I think Elementor should place the picture without nay margin, only the picture. I have the next properties set:
Content: Full Width
Elementor Widgets Space: 0px
Columns Gap: no gap
All margins and paddings: none (0px)
Tried height to default and forced to 8px
I have two ideas that might help you:
check for a border, maybe you set it on accident or it got imported
take a look at your custom css. Sometimes plugins like envato elements add their custom css without you noticing
It's also a good idea to use your browser and inspect the element to find out if there is any gap. You can also try that on the elements next to the widget you are using.
I am trying to make a print-friendly resume. Everything is working, except for an issue regarding the background image.
I do not want to have any margin on the print page, since otherwise the background image looks messed up:
https://www.dropbox.com/s/h2zttd8u6r6hq0g/Screenshot%202015-01-08%2014.38.14.png?dl=0
However, if I do not use any margins, the background looks good but I am unable to do any margin on the second (or other pages):
https://www.dropbox.com/s/16vgu3nahfgeipr/Screenshot%202015-01-08%2014.38.55.png?dl=0
body {
margin: 30px 0;
}
That works for the first page, but unfortunately this does not work for any page breaks. Is there a way to do padding/margin in relation to the top/bottom of a print page?
Edit: sorry for the hideous example, but this is basically the code:
http://jsfiddle.net/yugv84qw/
If you press print and save to pdf (in Chrome at least), you'll see that the background fills the entire page. However, when you include
#page {
margin: 1cm 0;
}
You will see that the margin I want works, but then the background also uses that margin. In other words: I want the background to stay page filling, while there is a top and bottom margin for text on every page.
You are fairly limited by the vendor implementation of the CSS paged media module, that said, you are able to use the module to target the first page by using the :first psuedo selector, e.g.:
#page:first {
margin: 0
}
Should support / lack of implementation prove an issue- you will need to resort to adding your content into a series of elements which match the output page dimensions, then removing the margin/padding on the first.
Sadly, the control of printing from the web, even in this day and age, is not an easy process.
I hope I can explain this properly. I have the home page. It has 4 widget areas on it. Each widget area has something in it (you'll see in the screen shot I'm including). Three widgets just text with crazy CSS going on and have a header w/a box around the header (including text). The 4th widget is irrelevant because it's just an image.
One widget's header has a box, radius, background color and it's left/right justified with the rest of the information inside the widget. Two other widgets - the header is not justified left and right 100% w/the entire widget area.
See the image as it'll make more sense.
here's a direct link to the image for a alrge view: http://postimage.org/image/ofdqc1sa7/
The wdiget section "New customers" - see how it's left/right justified. It stretches the entire width of the whole box. Now see the Existing and Why - how it's not stretched all the way across left and right. How can I get it to stretch all the way across? Iv'e been going over this soooo many times with change this/change that. My Firebug in Firefox is o fire, but I can't seem to get the correct CSS code to make this happen. Driving me crazy.
Any help is appreciated. Thank you in advance for your reply...
Change this style
.cl-content {
margin: 8px;
}
To this
.cl-content {
margin: 0px;
}
However, this will cause some alignment problems with your columns. But, that class is what is causing your problem.
[ Edit ]
If you change the #text-17 and #text-18 widths to 670px, it should resolve your problem.
I would also change #LoginWithAjax to #LoginWithAjax { padding: 5px; }
Initialy I'd say there may be a padding issue. Is there a live link that I can firebug to troubleshoot further?
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;
}