I recently wrote a simple TicTacToe web app using Angular and deployed it here.
Whenever I inspect in browser on my laptop, all mobile dimensions look fine.
But when I visit the website on mobile devices, the styling messes up.
iPhone 7+ doesn't display the grid.
iPhone SE displays a wacky grid.
I've tried different browsers on desktop and mobile and the results are the same as above.
SCSS for the 3x3 game board:
main {
display:grid;
grid-template-columns: 100px 100px 100px;
grid-gap: 6px;
text-align: center;
justify-content: center;
padding: 12px;
align-items: center;
}
app-square {
border-radius: 12px;
height: 100px;
}
.newGameButton:hover {
color: bisque;
background-color: black;
}
SCSS for the squares in the game board:
.square is a button.
.square {
width: 100%;
height: 100%;
font-size: 5em !important;
opacity: 0.9;
border: none;
border-radius: 12px;
}
.square:hover {
opacity: 1;
background-color: rgb(255, 255, 255);
}
.Xsquare {
width: 100%;
height: 100%;
font-size: 5em !important;
opacity: 0.9;
border: none;
border-radius: 12px;
background-color: #14F195;
}
.Osquare {
width: 100%;
height: 100%;
font-size: 5em !important;
opacity: 0.9;
border: none;
border-radius: 12px;
background-color: #9945FF;
}
GitHub repo
UPDATE 1: Changed the square button into a div and it fixed it but this still doesn't explain why the button styling bugs.
Related
Hey guys I've been working on my portfolio site, and it is responsive for mobile, my Macbook Air
and both of my desktop monitors. but for some reason on my Lenovo laptop, the columns seem shorter and the text goes beyond the column length. Do I need another media query of is there something I need to fix in my css? Here is a screenshot
screenshot of my problem
here is the code, the media query has a min-width of 700px
#skills .container {
max-width: 1200px;
text-align: center;
background: #fff;
border-radius: 20px;
height: 70vh;
box-shadow: 0px 10px 30px rgba(57,56, 61, 0.205);
display: flex;
/* -webkit-box-flex: 1;
flex-grow: 1; */
}
#skills .container .column {
display: block;
padding-left: 15px;
padding-right: 15px;
flex-basis: 33%;
border-bottom: 0px solid #e2e2e2;
border-right: 1px solid #e2e2e2;
/* margin-left: 10px;
margin-right: 10px; */
}
#skills .container .column:last-child {
border-right: none;
border-bottom: none;
}
#skills .container .column #skills-icon{
margin: 20px 20px;
font-size: 35px;
color: #6666ff;
}
#skills .container .card p {
font-family: 'Ubuntu';
}
Your issue is the height: 70vh; on your #skills .container selector.
Your laptop screen likely has a lower vertical resolution and 70% of that isnt enough to display the content of your skills container.
Try changing this to min-height: 70vh;, that way it can be taller if required by the content.
I created a drag and drop or sortable image using touch punch.. Everything works fine in chrome even in android. But it seems it is not working in Safari using iPhone..
https://jsfiddle.net/y05w1mog/
Might be an CSS issue.. Image should be draggable to one of the four options below.
td {
width: 200px;
vertical-align: top;
}
.box {
border: 2px inset #aaaaaa;
height: 240px;
overflow-x: hidden;
text-align: center;
padding: 10px;
overflow-y: auto;
}
.box img {
position: relative !important;
}
#div-images img {
height: 120px;
position: absolute;
top: 5px;
left: 0;
}
#div-images {
height: 100px;
width: 150px;
position: relative;
margin: 0 auto;
border: 3px double black;
padding: 5px;
}
th {
background-color: #538DD5;
color: white;
}
It turns out
containment: 'window',
from the touch punch is the one, not working in safari..
I have everything in my comment box set with a width of 100%. The div has a padding of 10px. However, the textarea somehow goes into that padding, but only on the right side. A bit hard to explain but here is a photo: https://i.imgur.com/aWQVeto.png
You can see on the right that the textarea exceeds the rest.
I have tried googling this problem but I can't seem to find anybody else that has experienced this. It shows in every browser, which I thought at first it was a browser issue.
Here is the modal itself code:
#pictureModal {
width: 31%;
height: auto;
text-align: left;
position: absolute;
top: calc(50vh - (/* height */100px / 2));
left: calc(50vw - (/* width */140px / 2));
padding: 20px;
background-color: black;
color: white;
text-align: center;
}
And here is the input code:
#pictureModalInput{
width: 100%;
height: 30px;
outline: none;
}
I want the right of the textarea to be flush with the X box and the Submit button.
Try this one also I think its useful for you. You have to use box-sizing: border-box; in this #pictureModalInput id.
#pictureModal {
width: 31%;
height: auto;
text-align: left;
position: absolute;
top: calc(50vh - (/* height */100px / 2));
left: calc(50vw - (/* width */140px / 2));
padding: 20px;
background-color: black;
color: white;
text-align: center;
}
#pictureModalInput{
border: none;
height: 30px;
outline: none;
box-sizing: border-box;
width: 100%;
}
button {
background: black;
border: 2px solid #FFF;
border-radius: 0;
color: #FFF;
margin-top: 6px;
text-align: center;
width: 100%;
}
<div id="pictureModal">
<textarea id="pictureModalInput"></textarea>
<button>Submit</button>
</div>
Remove the padding on the textbox. I included an example below with just a couple deviations from your code.
Textbox padding is a user-agent style, meaning that it comes shipped with the element itself. You can override these user-agent styles in your stylesheet. It's good to be aware of these styles by reading up online and then exploring any layout issues you're having with devTools to see whether any user-agent styles might be causing your bug.
#pictureModal {
background-color: black;
color: white;
display: flex;
flex-direction: column;
height: auto;
left: calc(50vw - (/* width */140px / 2));
padding: 20px;
position: absolute;
top: calc(50vh - (/* height */100px / 2));
width: 31%;
}
#pictureModalInput{
border: none;
height: 30px;
outline: none;
padding: 0;
width: 100%;
}
button {
background: black;
border: 2px solid #FFF;
border-radius: 0;
color: #FFF;
margin-top: 6px;
text-align: center;
width: 100%;
}
<div id="pictureModal">
<textarea id="pictureModalInput"></textarea>
<button>Submit</button>
</div>
I am trying to make a ribbon type header for a website I am working on but I am struggling to get the text to adapt well to a smaller resolution.
Is there a way I can make the text responsive, or flow to a double line on smaller screens?
I have put the code into JS fiddle to show what I am using here.
h3.ribbon {
background: #c3d5d8;
margin-top: 0px !important;
margin-left: -30px;
padding-left: 20px;
color: #fff;
border-bottom: 40px solid #c3d5d8;
border-right: 20px solid #fff;
height: 0px;
line-height: 40px;
font-size: 18px !important;
font-family: 'ProximaNovaThin';
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
font-weight: bold;}
You could use a skew'd pseudo element for this, allowing for the text to wrap if need be.
.title {
display: inline-block;
width: 70%;
min-height: 50px;
line-height: 50px;
background: lightgray;
position: relative;
}
.title:before {
content: "";
position: absolute;
height: 100%;
min-width: 120px;
width: 40%;
left: 80%;
background: lightgray;
transform: skewX(45deg);
z-index: -1;
}
<div class="title">this is a long title............................a really long title! Like a super long title that should require a second line!</div>
In my project,I use bootstrap and less. Although when I test the template, it look beautiful, but when test it using ieTest, I found something wrong.
The pictures are, from top to bottom, Chrome 22, IE9 and IE6:
I found all I can find, eg "three pixel jog", but I still can't solve it.
here is the html code:
<p class="top-tag">
<span class="floatbutton">
<
>
</span>
down
ask phone
time /
rate
<b>1,10</b>
</p>
here is the css:
p.top-tag {
margin-top: 25px;
font-size: 12px;
width: 100%;
a.down, a.ask-detail {
display: inline-block;
height: 25px;
text-align: center;
line-height: 25px;
border: 1px solid #dddddd;
color: #2f2725;
}
a.down { width: 44px;}
a.ask-detail {
width: 90px;
margin: 0 43px auto 20px;
}
b {
margin-left: 284px;
display: inline-block;
}
span.floatbutton {
float: right;
width: 39px;
//display: inline-block;
overflow: auto;
zoom: 1;
//for the IE6
//---
//_overflow: hidden; zoom: 1;
//---
height: 25px;
margin: 4px -3px auto 0;
a {
display: inline-block;
vertical-align: top;
width: 13px;
height: 13px;
border: 1px solid #ddd;
padding-left: 4px;
padding-bottom: 4px;
}
a.left-button {
float: left;
display: inline;
border-right-style: none;
*margin-top: 1px;
}
}
}
I use the bootstrap.css and css.less at the beginning of the template.
The question is why the pixel under the IE, they can't work. And the IE6 they can't display, and float far.
Thanks!