I have a FlipClock.js on a page which displays perfectly in all devices and browsers except iPhone.
On an iPhone (4, 4S, 5, 6) it fills the scrolling tabs with the number like the image below.
Has anybody come across this and perhaps can suggest a link to look at. There has been hours of trial an error now with no luck. Thanks!
The relevant HTML for the clock is:
<div class="up">
<div class="shadow"></div>
<div class="inn">9</div>
</div>
<div class="down">
<div class="shadow"></div>
<div class="inn">9</div>
</div>
I have targeted the .min class with fixed font sizes, but no difference. It only does this on iPhones but not in the iPhone simulator in Chrome inspect. Thanks for any help!
I solved this problem for myself by changing the font's size after a certain width.
#media screen and (max-width: 448px) {
.flip-clock-wrapper ul li a div div.inn {
font-size: 36px !important;
}
}
Related
So, I have this website: https://projeto-jogo-memoria.vercel.app/
I asked some friends to test it and one of them has an iPhone XR. According to the internet iPhone XR's screen width is 414 pixels.
If I open it on dev tools, it works fine: https://i.imgur.com/NWBND0c.png
But this is how it shows up on the phone: https://i.imgur.com/YVZU2gw.jpg
I noticed the margin between circles is a lot bigger, but I don't know why this is happening. Could you guys help me?
EDIT ------
I noticed when the game is complete every (when every face is flipped) the margin works fine. On my code every button has an anchor tag like this:
<a id="card_${j}" class="card-round-container${(vals.includes(j) ? '' : ' ms-2' )} d-inline-block" onclick="proximoRound('#card_${j}')">
<div class="card-round-back card-round-${tamanho_tabuleiro}x" onclick="">
<i style="font-weight: bold;" class="d-none card-round-${tamanho_tabuleiro}x-icon fa-responsive-size-${tamanho_tabuleiro}x">${tabuleiro[j]}</i>
</div>
</a>
When two cards with the same icon are flipped, I set type="" and onclick="" properties on the anchor and it seems to works fine. Maybe the bug is coming from the type="button" on the anchor?
EDIT -------
EDIT²:
This code is an example of the container, a row and a card.
<div class="container">
<div id="tabuleiro" class="row mb-3 mb-sm-4 mb-xl-3 mb-xll-5">
<div class="mb-2 text-center col-12">
<a id="card_0" class="card-round-container d-inline-block" type="button" onclick="proximoRound('#card_0')">
<div class="card-round-back card-round-4x" onclick>
<i style="font-weight: bold;" class="d-none card-round-4x-icon fa-responsive-size-4x">2</i>
</div>
</a>
</div>
</div>
</div>
SOLUTION: I removed type="button" from the anchor tag and the unecessary margin/padding seems to be removed. This seems to be some kind of problem with safari browser only. Does anyone know why it happened?
according to internet iphone XR screensize is 828x1792 pixels and according to browser inspect tool the screensize of iphone XR is 414x896 pixels and you r design changes below 260px you need to do some css based on the media quesries .
You need to change the height and width of .card-round-4x if goes to below 260px
Just change
#media (min-width: 0px)
.card-round-4x {
width: 40px;
height: 40px;
}
My desktop version of my website is perfect, and runs exactly how it should, however, on mobile. I've been having Issues
Issue 1
When I uploaded the files to the hosting server, the logo was enormous, and threw everything off balance
Image was throwing everything off balance i.e. Huge Navbar, menu button not aligned to the left
I then resolved this issue with the following Code in my CSS
#media only screen and (min-width: 200px) and (max-width: 670px) {
.site-branding img {
max-width:320px;
max-height:56px;
}
.main-header {height:80px;}
}
#media only screen and (min-width: 670px) and (max-width: 1023px) {
.site-branding img {
max-width:640px;
max-height:118px;
}
.main-header {height:140px;}
}
Issue 2
After implementing this, the Navbar shrunk, but so did the logo, and changing the values in my CSS did not change the logo size to an appropriate one. It just stayed the same size
Issue 2 Image
Issue 3
This change also affected my Products page, by extending the navbar length on the mobile version, extending the width of the navbar, while keeping all of the other content to it's original alignment
Issue 3 Image
Conclusion
I'd like to know how to keep the logo and the menu bar aligned on the same line, while increasing the size of the logo for the mobile version of the site.
I also do not know what is causing the issue on the products page, and I have no idea how to resolve that issue.
Thank you
Please check Below code I replace Some Html also I added a comment
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">
<!-- <div class="site-branding" img src="img/Logo.png" > --> <!-- This is not a right way to put HTML -->
<div class="site-branding"> <!-- I Removed img src="img/Logo.png" -->
<img src="https://logodownload.org/wp-content/uploads/2019/07/mini-logo.png" style="width:100%; height: auto;" /> <!-- Here I changed width 100%; and Height auto -->
</div>
</a>
And also add this css and You can change max-width as per your logo size
#mainNav .navbar-brand {
max-width: 120px;
}
Maybe add display:flex to common parent
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
I have an HTML website in which I am trying to hide a div containing images in mobile view.
#media screen and (max-width: 600px) {
#kingg { display: none !important; }
}
<div id="kingg" class="grid-uniform section-four" >
<div class="container">
<div class="main-title">
<div class="hometab-heading box-heading">ABOUT US</div>
<div class="title-sep"></div>
</div>
<div class="grid__item ">
<div class="grid__item wide--two-thirds post-large--two-thirds large--two-thirds">
<p>Anvi Jewellers founded by <b>Lavanya Ghulekar</b> in 2017 is a by-product of the passion for creativity of a home maker. Our vision is to build trust with high ethical standards, fair pricing and added value to our customers. We have made it our mission to strive every day to earn the confidence and trust of our clients by meeting and exceeding expectations of quality, service, and unsurpassed value. We expertise in all types of designer light-weight kundan, antique, c-zet, pearl jewellery etc. We make gold ornaments in 20 carat and 22 carat. Anvi Jewellers was founded with a refreshing and courageous objective to make beautiful jewellery accessible, affordable and forever. After 2 years of happy clients, Anvi Jewellers has finally launched online. Anvi provides our clients with more than they imagined and less than they anticipated.</p>
<div class="invisible-medium"></div>
<div style="margin-top:52px;" class="grid__item ">
<div class="grid__item wide--one-third post-large--one-third large--one-third medium--one-half small--grid__item">
<img id="see" src="images\a1.jpg" height="259.95" width="239.95" alt="" title="" />
</div>
<div class="grid__item wide--one-third post-large--one-third large--one-third medium--one-half small--grid__item">
<img id="seep" src="images\a11.jpg" height="259.95" width="239.95" alt="" title="" />
</div>
<div class="grid__item wide--one-third post-large--one-third large--one-third medium--one-half small--grid__item">
<img id="seel" src="images\a3.jpg" height="259.95" width="239.95" alt="" title="" />
</div>
</div>
</div>
Now the problem is, it is working in localhost but when I uploaded it to server it is not hiding the div. Here is my website link website.
Can anyone tell me what could be the problem, please?
After going through your source code online, this is what you actually have, inline:
<style>
#media screen and (max-width: 600px) {
#kingg img { display: none !important; }
}
</style>
This is working as expected, hiding the image in that div.
So the code you posted is bound to work, as it doesn't seem to have any syntax errors or anything.
So i would say to make sure you are uploading the file you are editing or edit the file in the server directly.
use correct id or class. Use the code below to hide text.
.grid__item p:nth-child(1) {
display: none;
}
I have a webpage containing several Divs which contain individual 'pages'. I have defined the following CSS styles:
#charset "utf-8";
/* CSS Document */
.hideDiv{
display:none;
}
.showDiv{
display: inline;
}
Everything worked fine and for a long while we had no problems either viewing our pages in Safari on our Macs or in IE6 (which our client uses).
We then updated Safari from 4.0.5 and we suddenly had page elements initially appearing incorrectly positioned. The first page is OK but when you click 'Next' an image positioned to the right of the layout appears initially offset considerably to the right mostly outside its containing Div clipping most of the image. However as soon as I resize the window the image jumps into it's correct position. If you click from say page 2 to page 3 and then click back again to page 2, so the image has been cached, it displays correctly.
We painfully downgraded Safari on some Macs and soldiered on with others hoping an update would fix it. Curiously everything works well on my new Mac Pro running Safari 6. The pages always display fine in IE6. My MacBook Pro running Safari 5.1.7 always offsets the images.
I don't believe it is a Browser issue but an area of my code which isn't very robust and some Browsers don't interpret the code as we would want it.
I created fresh html files which are identical to the multi-div page but contain only one 'page'. The layout is solid every time I display it in Safari 5.1.7 so I don't think it is my html/CSS which defines the position of the element. Here is a typical Div containing a single 'page':
<!-- Page 1 -->
<div class="showDiv clear" id="page1">
<div id="bgPic-components">
<!-- Sub-Heading -->
<h1>Sub-Heading</span></h1>
<!-- Page Content Area -->
<div class="contentTextArea fullWidth">
<div style="position:absolute; width:280px; z-index:2;">
<p>Some body text here.</p>
</div>
<table style="position:absolute; right:40px; bottom:40px; z-index:0;">
<tr><td>
<img src="../../medialibrary/3DI/3DI0315.02.01.jpg" style="display:block; position:relative; height:440px;"/>
<p class="padCaption">Annotation</p>
</td></tr>
</table>
<table style="position:absolute; bottom:24px; z-index:0;">
<tr><td>
<img src="../../medialibrary/photographs/P0825.01.01.jpg" alt="" style="display:block; position:relative; height:300px"/>
<p class="padCaption">Annotation</p>
</td></tr>
</table>
</div>
</div>
</div>
I would be very grateful for any suggestions to help me narrow down and find the problem.
Regards
Chris
I am designing an app that works on the desktop, tablets and phones.
I have some collapsible content that I want to be inset in the desktop browser and ipad landscape, but not inset in tablet portrait and on phones.
I have other responsive elements working correctly, but the following html & CSS are not working:
HTML
<div id="storagePage" data-role="page" data-theme="a">
<div data-role="collapsible" data-collapsed="false" data-theme="b" data-content-theme="c" class="storage_devices" data-inset="true">
<h2>Header 1</h2>
<p>Content here</p>
</div>
</div>
CSS
#media all{
.storage_devices {data-inset: "true";}
}
#media (max-device-width: 520px) and (orientation:portrait) {
.storage_devices {data-inset: "false";}
}
I assume that the JQuery Mobile libraries are marking up the html and therefore the class is not identifying the div correctly. I have tried with id's as well with no luck.
Thanks
I have used
#media all and (max-width: 650px) {
.storage_devices {data-inset: "false"}
}
You can change the width, then add the orientation to fit your needs.