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
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 have a CSS problem with my responsive website. So on desktop browsers all content is displayed good, but I notice problem on mobile devices. Here is screenshot:
So on my website all the main content in mobile view is slightly moved to the right, so no blank consistent right blank space as left. You can see it on my screenshot link - subscription box is not centered, and similarly all content.
The problem is in the
.wrapper .sixteen.spans {
width: 940px;
padding-left: 15px;}
}
at https://techmonegy.com/wp-content/themes/frisco/style.css
Those values are set for all media. You want to set the width to much lower values for mobile... or don't set it there at all.
I've looked all over google and to be honest there aren't that many articles to answer a question as specific as this one , and i've tried going through the interface.
So when you make a new page , you have a body , and by default , that body has some margin's between it and the browser window , now i've managed to take care of the top and bottom one so there's no padding on the browser window ( a.k.a. margin's on the body ) but there's still space between the browser and the body on the left and the right side.
So how can i make my body's width be 100% of the browser's window because there's no width setting for the body , but only the page ( the browser window area).
body {
margin: 0;
padding: 0;
}
Okay here is the best I can do...
Aside from going to Page > Page properties > metadata and adding your own css file. what you can do is go to the rectangle tool and expand it to whatever height you want, however you MUST make sure that you expand the width to the edges of the web canvas past the body border until the tooltip displays 100%. afterwards embed whatever you want in there. but bewarned, the more complex the object the more custom coding you need to add.
Hope this helps
There is a way to make an object 100% the width of a browser. It's not so obvious and it's hidden:
Draw a rectangular box and fill the box with photo (scale to fit), set color to none.
Resize the rectangular box to the same width of the canvas (page size).
The combination of the procedures above activates 100% width on the object.
Be sure you are using "browser fill" and not just "fill".
The fill one will fill in a box in the center....
Browser fill will literally fill the whole page. Got stuck on this for ages!
There is a simple one-click solution for 100% width, which I just came across in this awesome article after having trouble getting my footer to go all the way across on wide screen laptops...
In your top toolbar between the X/Y and W/H inuts, there is a little box with an arrow that points either way. Hover over it and you will see that it says '100%'.
click it and you're done!!!
:-)
http://www.designeasy.co/2014/07/5-very-cool-tips-for-adobe-muse-cc-2014.html
insert the following code into your header tags as follows (Where theme.css is the name of your css.)Now, go to you css and enter the css given to you by user255
Open your page in adobe muse Go to "Page properties" select "Metadata" From Page properties and add the following code to HTML for <head> area:
<style>
body {
overflow-x:hidden;
}
</style>
I'm developing a website template and just spotted an issue with the gallery lightbox plugin. http://creativusmouse.com/Proteus/html_preview22/portfolio_2_col.html
When the gallery has more than 1 image the lightbox renders just fine but when it has only 1 image the large image wrapper gets smaller than the image.
I kind of spotted what's causing the issue - this template uses foundation 3.0 framework so on foundation.min.css file the very first selector is causing the problem:
" * {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
I tried to remove this and it fixed the problem however the whole website gets broken.
I'm not sure what code shall I paste here. If necessary I can post a link to download all the template files.
Thank you!
Don't change this code, modify the css for your wrapper instead. That snippet of code you posted is telling all elements to include any borders, and paddings in the calculation for width. So a box with 10px of padding and 5px of border space and is 200px wide is actually 200px wide. Without this code the box would actually be 230px wide.
You could do this...
Add to the class lightbox-outer - overflow: hidden.
.lightbox-outer {
overflow: hidden;
}
This works but it hides part of the image, it's like your box doesnt want to scale to the size of the image.
Do you have a setting in the lightbox stuff anywhere that is setting the a specific proportion?
EDIT2: Something else I found, if I remove "width" from the class .lightbox-skin then it starts behaving again. Problem is this width is applied to the element inline dynamically?
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;
}