Made a website for a friend and he wanted a logo-link in the bottom of the screen. Looks fine on my PC but on his MacBook it is much bigger. Please help.
My CSS is:
img.crossfitnorth {
border-radius: 20px;
width: auto !important;
max-width: 100px !important;
}
Related
So I noticed something peculiar while working on a personal project just now.
The following code will cause an issue with the position of the div element in portrait mode if the phone is switched back and forth between orientations.
Instead of the div sitting fixed or flush to the bottom of the screen, the div will float above and not touch the bottom of the screen at all.
html {
width: 100%;
height: 100%;
border-bottom: solid blue 3px; box-sizing: border-box;
}
div {
width: 200px;
height: 200px;
position: fixed;
bottom: 0;
box-sizing: border-box;
border: solid black 3px;
background: white;
}
<div></div>
While troubleshooting this issue, I discovered the following things:
If you change the height of html from 100% to 110%, the issue resolves itself.
110% is very likely not the exact "break" point, but I do know that the div will not touch the bottom of the screen even if the height of html is set to as much as 105%.
The dimensions of the square do not matter too much. I've tested at 10px, 50px, 100px, and 200px, and it disappears completely if set to 10px, but behaves the way I've described above for all the other values.
Notably, I am testing this on, not an iPhone 6s, but a plain iPhone 6.
I encourage other users to test this for yourselves and share your experience!
Does this bug exist on other devices? In other iOS versions?
Is there any way to fix this other than increasing the height of html to 110%?
Before I posting this question I have checked this forum and google but the methods is not working for me. May be I am doing wrong.
I have a page which is look like this :
enter image description here
In this page I have few images and for that I am using following css code:
display: inline-block;
width: 100% \9;
max-width: 100%;
min-height: 75px;
height: auto !important;
height: 75px;
Now in Firefox browser both top and bottom images are showing correct size but in internet explorer all images are showing full height ( filled up entire website)!!
Now If I remove this line
height: auto !important;
then on internet explorer image height is perfect but on Firefox bottom images are stretch.
How can I solved this problem ?
Thanks.
please try this.
{
display: inline-block;
max-height: 75px;
min-height: 75px;
width: auto;
}
About your all image height will be 75px but width may be not same for all and if you want image also same then please use below.
{
display: inline-block;
max-height: 75px;
min-height: 75px;
width: 100%;
}
If all images have same width then there will no issue but if width are not same for all images then may be some images will be stretch.
So im using the foundation frameworks for my wordpress build. I cant seem to figure out why im getting this weird margin or padding on the right side when i drop down to tablet or mobile view.
Anyone ever seen this or know of a fix?
Heres my dev site. if you size the browser down to tablet or phone size and scroll to the left or right it will show up.
I'm using Chrome
body {
background: url(../img/dark-grungewall.jpg) repeat;
height: auto;
}
.site-container {
background: #fff;
box-shadow: 0.5px 0.866px 63px 0px rgba(0, 0, 0, 0.83);
width: 100%;
margin: 0 auto;
}
.row {
margin: 0 auto;
max-width: 100%;
width: 100%;
}
I wanna say the error is coming from my containing divs or body but im not really sure.
http://dev.solarinnovations.com/
This happened to me in the past when using the .row class from Bootstrap. Try putting overflow:hidden in the style part of the wrapper/container class and see if it fixes the issue.
In this part of your code, you set a max-width. This max-width is stopping the site from stretching across the entire window.
.row {
margin: 0 auto;
max-width: 87.5em;
width: 100%;
}
You can fix it by easily using:
max-width:100%;
This weird border sometimes appears and later disappears. I attached the code in the link along with the screenshot. Each div have similar code. Also some background images have transparent color. It is usually fine in chrome and firefox but appears in OS devices and in my android cellphone.
edit:
bug: http://postimg.org/image/kpmaqbh7x/full/
no bug: http://postimg.org/image/61eo0gq3l/
You might have to zoom in to see it.
sample code:
#div_room_107 {
width: 15.6%;
height: 100%;
float: left;
display: inline-block;
background-color: #8e8e8e;
background-image: url(/staff-app/_/img/room_corners7.png);
background-size: 100% 100%;
margin: .5% 0 .5% .5%;
}
I am trying to create a mobile responsive template. I am using the CSS media to find the browser width and it's working fine in most cases.
I want however on a device where the left column will take up too much space for it to jump below the main content on the right.
The solution to get the left down was to use flexible columns to reverse the flow.
This works fine in Firefox, Google Chrome, Internet Explorer and Opera on a desktop.
It doesn’t work on Google Chrome on an iPhone and doesn't work in Safari either on a desktop or iPhone. In both cases the left column appears above the right column.
It works on my friend's Android.
This is the html:
Expand|Select|Wrap|Line Numbers
<div id="content">
<div class="left">
LEFT CONTENT
</div>
<div class="content">
MAIN CONTENT
</div>
</div>
The CSS that sets the values for these blocks on screens of 980 pixels and larger:
Expand|Select|Wrap|Line Numbers
#content {
clear: both;
margin: 0 auto;
width: 980px;
display: inline-block;
min-height: 600px;
}
.content {
float: left;
min-height: 500px;
padding: 10px 10px 0 10px !important;
width: 742px !important;
}
.left {
float: left;
padding: 10px 2px 0 10px !important;
width: 202px !important;
}
The code which control the columns at the correct browser size is:
Expand|Select|Wrap|Line Numbers
#media (max-width: 632px) {
#content { width:603px; display: -webkit-flex; display:flex; -webkit-flex-direction:column-reverse; flex-direction:column-reverse; min-height: 0;}
.content { width:583px !important; min-height: 0;}
.left { width:583px !important;}
}
Any help would be much appreciated.
I used your code to simulate locally. It appears to work just fine on Safari (for Mac, at least). Isn't this the expected behavior? Can you provide images or further details?
It isn't related to your question directly, but I guess you'd better use percentage width instead of raw pixels. If you don't want divs to save a distance between them, you should use margin-right (or left).