I' using a div on my website with the following css class:
width: 100%;
margin: 6px auto 0;
height: 51px;
line-height: 50px;
text-align: center;
max-width: 1290px;
There are several links in this div with the following css class:
display: inline-block;
width: 7.5%;
Note: I've also tried the following:
display: inline;
padding: 0 20px;
This layout works fine on all major browsers (including Android stock browser), however im experiencing nasty problems on Opera Mobile when zooming in. Have a look:
It is being wrapped into 2 lines basically.
( div id="menu" )
A simple:
white-space: nowrap;
to the #menu class fixed this problem.
Related
I'm seeing a bug that is intermittently reproducible only on iPhone Safari (not on any other mobile or desktop browser not even macbook safari). The code looks like:
<div style="overflow: auto; height: calc(100% - 55px); background-color: cyan;">
<ul ...><li..></li> <!-- some ul containing li omitted for brevity-->
<label class="certainClassname" style="font-size: small; font-style: italic; width: 100%; text-align: center; background-color: yellow">
{{"msg" | translate}}
</label>
</div>
In other style sheet I have:
.certainClassname {
cursor: pointer;
word-break: break-all;
}
msg = "PKtest!" for my testing though it usually has another value.
The problem is that this label is getting cropped at the edges when the bug is reproduced as below:
This bug is only seen on Safari iPhone and none of the other browsers, and seems to only happen the first time that page is loaded, and not later. It could be related to zooming because even the tiniest pinch-to-zoom on iPhone fixes it and the label text (and yellow) expands fully.
Could someone please help me diagnosing this in CSS above? I've tried to fix using each in css of label but none have worked:
display: inline;
display: inline-block;
display: block;
padding: 2px 10px 2px 10px;
margin-left: auto;
margin-right: auto;
z-index: 999;
clear: both;
(all these above tested but none fixes this issue seen intermittently and only on iPhone Safari).
The reason the label is getting cropped might be because of style="overflow: auto; height: calc(100% - 55px)" for div.
div is the parent of label. Therefore label is inheriting its style from its parent. You may consider removing height: calc(100% - 55px) to see if it works
It's difficult to get the idea without reviewing working code. But I tried to run your code, regenerate the bug and here is the possible solution. Let me know, is it something you are looking for?
.certainClassname {
cursor: pointer;
word-break: break-all;
font-size: small;
font-style: italic;
width: 100%;
text-align: center;
background-color: yellow;
display: inline-block;
}
ul {
padding: 0;
}
<div style="overflow: auto; height: calc(100% - 55px); background-color: cyan;">
<ul ...><li..></li> <!-- some ul containing li omitted for brevity-->
<label class="certainClassname">
{{"msg" | translate}}
</label>
</div>
I think you have to set you label around a div with width: 100% a background-color: yellow
I struggled for some time with this issue. My landscape images looked great but I couldn't get my portrait orientated images to align properly. This is the code I had and the auto margin and padding seemed to have no effect at all and the image would always align to the left of the slider (parent element).
.slider img#portrait {
min-height: 100%;
width: auto;
margin: 0 auto;
padding: 0 auto;
}
I managed to find little snippets of what might solve the problem from different sources so I wanted to include all of the ones I used here in one place.
This is now what I have which works well:
.slider img#portrait {
height: auto;
width: 50%;
display: block;
float: none;
position: relative;
margin: 0 auto;
padding: 0 auto;
}
Images are by default displayed as inline-block elements. So change this to display: block;
If there is a float: left; then the rulemargin: auto; will have no effect either, so set float: none;
The margin auto will have no effect either unless the image has a set width so width: 50%;
And don't forget to set position: relative;
If you are not modifying the display property of images then you can use: .slider {text-align: center;}. (Only works if applied to parent element.)
I'm trying to figure out how to make this basic CSS mobile friendly/responsive to browser window changes. Currently, the code displays fine at all sizes except horizontal tablets. Usually pictures and code will drop down to separate rows, but for some reason everything is being displayed on one line and extending past the page borders. I've tried everything from max/min-width and padding to positionand overflow, yet I can't get this one to work.
Here's the important code, the rest of it is just text formatting and effects. The html is basic and just calling .view
.view {
margin-left: auto;
margin-right: auto;
width: 300px;
height: 300px;
float: center;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 1px 1px 2px #e6e6e6;
cursor: default;
background: #fff
}
.view .mask, .view .content {
width: 300px;
height: 300px;
position: absolute;
overflow: hidden;
top: 0;
}
.view img {
display: block;
position: relative;
}
This is all done through Squarespace, and they assure me that it's my code causing the issues and not their template code.
What I'm referring to are the picture on this page. Change the size of the page and you'll see what I'm referring to when you hit about 4-6 inches wide. The pictures overlap and a scroll bar forms. There's no spacing between the individual pictures.
Your images are re-sizing because .sqs-col-12 and .sqs-col-4 are set to 33.3333%. If you give them a fixed width (say 320px) they will not collapse down on themselves, but will float down to the next line on a resize.
.sqs-col-12 .sqs-col-4 {
width: 320px;
}
I have created a website however when I shrink the browser the website stays in position, apart from the form.
If anyone know's how I can stop the form from moving, I will be very grateful.
I have tried position: relative and white-space: no-wrap; but still no luck.
Thanks in advanced
Unique
My Code:
http://jsfiddle.net/r5cu1157/
#form-holder {
float: left;
width: 400px;
height: 400px;
padding-left: 100px;
padding-top: 30px;
display: block;
*display: block;
white-space: nowrap;}
If you want the form to be center aligned then do a
Margin: 0 auto;
remove the float left and i would suggest to stay away from specifying a height of elements
http://jsfiddle.net/r5cu1157/1/
This is the CSS that I have for my container that holds my table and forms, could try using it for your form, I believe it is a mix of position and margin:
.container
{
position: relative;
top: 250px;
background-color: #877CB0;
margin:0 auto;
text-align: center;
}
I'd like the scrollbar within my "article" DIV to be always visible. I tried the code below but without success (scrollbar only shows up when I start scrolling down). I'm using safari latest version. Thanks
.article {
float: right;
text-align:justify;
width: 400px;
height: 450px;
padding: 60px 82px 49px 82px;
position: relative;
z-index: 15;
margin-top: 90px;
background: #fff;
/* max-width: 25%; */
overflow:scroll;
overflow-y: scroll;
}
Try using
overflow-y: scroll !important;
It's used to cover IE errors, but might give it a shot. Have you tried other browsers?