This one is messing with my head. The following HTML/CSS looks fine on every browser, expect when I read it on an iPhone. The text in the a tag(SITE DESIGN SOME COMPANY) is noticeably smaller by about 25%. I have gone up through the DOM and made sure no other styles are computing on my desktop.
<footer>
COPYRIGHT 2012 / <a href="http://somesite.com">
SITE DESIGN SOME COMPANY</a> / ALL RIGHTS RESERVED
</footer>
footer {
width: 100%;
position: absolute;
padding: 10px 0 10px 0;
left: 0px;
bottom: -50px;
text-align: center;
word-spacing: 20px;
font-size: 75%;
}
I've experienced this, too. iPhone renders % font sizes differently than other browsers. Especially if nested inside multiple elements with multiple % changes (if your <footer> for example is inside another element with another 75% font size declaration).
If you change 75% to 0.75em (or use something other than a percentage), you should be back in business.
footer {
width: 100%;
position: absolute;
padding: 10px 0 10px 0;
left: 0px;
bottom: -50px;
text-align: center;
word-spacing: 20px;
font-size: 0.75em; /* or 10pt, or... */
}
Related
I'd like to achieve the following layout, in Ionic Vue, ideally using native components. Below is just a schema of what I want and I'm mostly interested in the desktop behavior:
Vue.createApp({
data: () => ({
isLeftOpen: false,
isRightOpen: false
}),
methods: {
toggleSidebar(side) {
this[`is${side}Open`] = !this[`is${side}Open`];
}
}
}).mount('#app')
body { margin: 0; overflow: hidden; }
* { box-sizing: border-box; }
#app {
height: 100vh;
background-color: #f5f5f5;
}
main {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
sidebar {
background-color: white;
display: block;
padding: 1rem;
width: 270px;
position: absolute;
top: 0;
bottom: 0;
transition: transform .21s cubic-bezier(.5,0,.3,1);
box-shadow: 0 1px 8px 0 rgb(0 0 0 / 20%), 0 3px 4px 0 rgb(0 0 0 / 14%), 0 3px 3px -2px rgb(0 0 0 / 12%);
}
sidebar[left] {
left: 0;
transform: translateX(-280px)
}
sidebar[right] {
right: 0;
transform: translateX(280px)
}
sidebar.open {
transform: translateX(0);
}
sidebar button {
width: 2rem;
height: 2rem;
position: absolute;
border-radius: 1rem;
border: 1px solid #f5f5f5;
right: .5rem;
top: .5rem;
cursor: pointer;
font-size: 1.5rem
display: flex;
align-items: center;
justify-content: center;
}
<script src="https://unpkg.com/vue#next/dist/vue.global.prod.js"></script>
<div id="app">
<main>
<button #click="toggleSidebar('Left')">left</button>
<button #click="toggleSidebar('Right')">right</button>
</main>
<sidebar left
:class="{open: isLeftOpen}">
Left sidebar
<button #click="toggleSidebar('Left')">×</button>
</sidebar>
<sidebar right
:class="{open: isRightOpen}">
Right sidebar
<button #click="toggleSidebar('Right')">×</button>
</sidebar>
</div>
In short, I want two sidebars completely unrelated, which should be opened/closed independently on all devices, according to user's choice. The argument that opening more than one sidebar at a time is not good UX doesn't really hold water on this project, as it's basically a full-screen map and the sidebars hold various controls and info about what's on the map. The requirement is that the user might want to have both sidebars open, but they might also want them both closed, even on big screens, to maximize the displayed portion of the map.
What options do I have here? To only have one "native" sidebar and mimic the second one with custom elements, using my own container and my own menu toggle resembling a native one? How would I make those look and behave as "native" on Android and iOS?
Here's my current layout, which achieves everything I want, except opening one sidebar always closes the other.
I don't know much about Ionic Vue (started using it today) but I'm decent in Vue. Tbh, I find Ionic Vue impressive. Very neat, documentation is stellar. But I'm stuck on this layout issue which seemed trivial at first.
Thanks for looking into this.
I'm designing a responsive site which means the layout changes. When viewed as wide as possible, my blockquote wraps to the next line. I would like for it to be on the same line.
I have managed to fix the open quote by adding some text-indent however I'm unable to move the close quote.
My HTML:
<blockquote><p class="blockQuote">In recent years we have noticed a growth in demand for audit services, by enterprises with foreign investment, partly because of the demands on the part of organizations such as the CPI and the central bank.</p></blockquote>
CSS:
blockquote {
font-family: serif;
font-style: italic;
color: #000;
margin: 0px 0px 10px 0px;
}
blockquote:before {
content: "\201C";
}
blockquote:after {
content: "\201D";
blockquote:before {
position: absolute;
width: 60px;
height: 60px;
line-height: 1;
font-size: 120px;
}
blockquote:after {
position: absolute;
width: 60px;
height: 60px;
line-height: 1;
font-size: 120px;
}
When I use a span element, the close quote fixes but the open quote looks like it should move further up.
Add <span> tag instead of <p> tag. Working JSFiddle here https://jsfiddle.net/jfmf4ujc/
First of all I have to say:
what a phantastic piece of software!
Well designed, implemented and documented, and many, many cool features.
Tanks a lot for giving that away as Open Source!
Now I have made a slider implementation for the "Gambio GX"-shopsystem (a very advanced osCommerce fork.)
You can see it here in action: http://marmorkamin-shop.de/Test/
I have used all image transformations (377) and caption animations (438) available, both are randomly selected for each slide...
(Resulting in 163,618(!) different ways to change slides....)
The slider is dynamically generated with PHP, based on slide-information in the shops database....
As inline-styles are very inflexible in such an environment, I have moved the styling to a stylesheet.
It already works like a charm, almost....
Two problems I am encountering:
The caption area is sometimes clipped
(see 1st caption in this picture: screenshot)
Only bullets 1, 2 and 3 in the bullet navigator are active, the others do not respond.
Any idea what could be the reason for this??
Thx again for this great software!
Edit:
The caption area is sometimes clipped (see 1st caption in this
picture: screenshot)
Found a quick and dirty solution for this meanwhile:
Assign a clip: auto !important; CSS direktice for the caption elements...
But I am sure there must be a better solution :-)
Re: caption clipped
Please always specify width and height for caption.
You can specify width and height in css file,
.slide_caption_1 {
left: 100px; top: 200px; width: 110px; height: 29px;
}
.slide_caption_2 {
left: 150px; top: 250px; width: 110px; height: 29px;
}
.slide_caption_3 {
left: 200px; top: 300px; width: 110px; height: 29px;
}
And you can specify inline style as well,
<div class="jssor_slide_caption slide_caption_1" data-u="caption" t="*" style="width: 110px; height: 30px;"></div>
Re: bullet problem
Style for 'mousedown' of bullet navigator not specified.
Given class of navigator item prototype is 'jssor_navigator_entry', the class name for 'active' state is 'jssor_navigator_entryav', the class name for 'mousedown' state is 'jssor_navigator_entrydn'
So, please add following css code in slideshow.css file.
.jssor_navigator_entrydn {
padding: 5px 0px 0px; border: currentColor; border-image: none; width: 27px; height: 24px; text-align: center; color: white !important; font-weight: bold !important; text-decoration: none; margin-right: 0px; float: left; display: block; position: relative !important; z-index: 9; cursor: pointer; background-color: rgb(50, 22, 1);
}
Here is an example to define bullet navigator in a simple way,
<script>
var jssor_options={
...
$BulletNavigatorOptions: { //[Optional] Options to specify and enable navigator or not
...
$SpacingX: 5, //[Optional] Horizontal space between each item in pixel, default value is 0
...
}
...
};
<script>
<!-- Bullet Navigator Begin -->
<style>
.the_navigator{
position: absolute;
bottom: 0px;
}
.the_navigator_item, .the_navigator_itemdn, .the_navigator_itemav {
position: absolute;
width: 27px;
height: 24px;
line-height: 24px;
color: #fff;
font-weight: bold;
background-color: #321601;
text-align: center;
cursor: pointer;
}
.the_navigator_item:hover, .the_navigator_itemav {
background-color: #d1013f;
}
</style>
<!-- bullet navigator container -->
<div class="the_navigator" data-u="navigator">
<!-- bullet navigator item prototype -->
<div class="the_navigator_item" data-u="prototype"><numbertemplate></numbertemplate></div>
</div>
<!-- Bullet Navigator End -->
http://itshappeninghere.com/mobile/explorer.php
Pulling up the page above in a browser will show that the list items for the menus at the top and bottom (collapsed by default), fill the viewport.
Pull up the same page on an ipod touch or iphone, the list items won't fill the viewport on portrait (there is a small gap on the right), but on landscape the page looks fine.
Is there anyway to fix this or is it just a quirk of css rendering?
Here's the CSS for the list items.
ul#m_nav li {
width: 16.667%;
min-height: 10px;
float: left;
-webkit-border-radius: 0;
border-radius: 0;
}
.mobile #filters ul li {
width: 16.667%;
min-height: 10px;
float: left;
-webkit-border-radius: 0;
border-radius: 0;
}
I think it is due to CSS rendering and the percentage-based widths that you're using. Webkit might be rounding it off differently than you intend - these things sometimes crop up.
Instead of floats with a percentage based width, could you try table display properties:
#filters ul {
width: 100%;
margin: 0;
padding: 0;
display:table;
}
#filters ul li {
padding: 0;
margin: 0;
display: table-cell;
height: 10px;
}
Check out this JS fiddle to see what it does.
I have worked and searched on finding a solution to this iPhone issue for almost a week. I need some help please. I have never done any programming for a smart phone. This is a first. This web page works great on all browsers but not on smart phones. Can you give me some advice on how to fix it or convert it?
I want to update this page so that it works on the iPhone\androdes devices. http://www.westernagencyinc.com/contact_us.html. I have a test page setup http://www.westernagencyinc.com/test.html to work on it and not effect the real page.
The way the "Contact Us" page\map works is it has an map in its top and another html file called location_info.html embeded in an IFRAME below it. The location_info.html file is a list of location with each having a unique anchor name for a city\pin on the map.
The map has pins on each city that are clickable areas with its target being the IFrame and the code look like this:
You can see that When you press on a button/pin on the map a variable anchor is set for that pin (city name) which matches one of the anchors in the location_info.html and that is sent to the IFrame html file so it will move\scroll to the correct location.
The IFRAME that holds the location currently has no scroll bars on it.
<area shape="rect" coords="145,-6,200,48" href="locations_infotest.html#kenmare" alt="Kenmare" target="location_content">
<div id="apDiv10" style="width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;" >
<iframe scrolling="no" name="location_content" src="locations_infotest.html" width="625" height="190"></iframe>
</dov>
#apDiv8
{
position: absolute;
left: 30px;
top: 255px;
width: 627px;
height: 18px;
z-index: 8;
text-align: left;
}
#apDiv9
{
position: absolute;
left: 30px;
top: 20px;
width: 625px;
height: 409px;
z-index: 9;
text-align: left;
}
#apDiv10
{
position: absolute;
left: 30px;
top: 448px;
width: 625px;
height: 190px;
z-index: 10;
text-align: left;
}