I'm referring to this link here: sortable
I want to make these items inline, and I've changed the display of the
#sortable1 li, #sortable2 li
to
display:inline;
in the css, but then all gets scrambled and my items fly off to the right, even though I have div wrapper set which is 500px - they fly out of that area.
Has anyone some good tips to handle this?
Thank you.
Try changing your css to:
#sortable1, #sortable2 {
margin: 0 10px 0 0;
padding: 0;
}
#sortable1 li, #sortable2 li {
display: inline;
font-size: 1.2em;
margin: 0 5px 5px;
padding: 5px;
width: 120px;
}
Related
can you please give me the right CSS snippet to move these price tags from left to right? I am very insecure with this positioning and don’t want to produce crippled code so it would be great to get some help here.
https://prnt.sc/1x10vpj
I suppose it is thie, but not 100% sure:
position: absolute;
bottom: 12px;
left: 12px;
padding: 3px 11px;
margin: 0;
min-width: 0;
min-height: 0;
line-height: 20px;
border-radius: 50px;
background-color: #fff;
color: #111;
font-weight: 700;
font-size: 13px;
}```
Thanks and regards!
Seems a bit of an incomplete question. Would be good to see where the element s sit in relation to other elelements and also associated CSS.
But looks like it is as simple as changing left, to right in your CSS.
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.
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.
My footer and other container divs seem unaligned in iPhone Safari (it looks OK on Android):
Nothing had worked so far. What could be the cause?
CSS:
html,
body,
#wrapper {
height: 100%;
}
body > #wrapper {
height: 100%;
min-height: 100%;
}
#content {
clear: both;
padding-bottom: 36px;
}
#header,
#content,
#footer {
padding-left: 20px;
padding-right: 20px;
}
.container {
margin: 0 auto;
width: 960px;
}
#footer {
background: url(images/footer_bg.png) repeat-x 0 0;
margin: -65px 0 0;
padding: 15px 0 14px;
position: relative;
clear: both;
height: 36px;
}
Live site:
http://www.pixelmatic.com/index-2/
You haven't really defined clear wrappers for your content sections, which makes this a bit harder to get everything to align. You could put some left padding on the left footer element if you wanted to move it over a bit, as it doesn't look great right up against the edge of the screen.
Anyhow, the section with the quote marks (top pink arrow in your image) is moved right by 4px because of the left margin of 4px on the latest-news div. You'll see the same thing by narrowing your desktop browser.
First I think it's the difference between the android and ios browser that will explain the difference between the browsers. Mobile browsers use zooming to fit a website to the device screen. Source: http://davidwalsh.name/zoom-mobile-browsers
<meta name="viewport" content="user-scalable = yes">
I think it's better to change it, so that the browser zooming is removed.
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1">
Second: there is an extra css rule that overrides your .container:
.page-template-front-page-2-php .container {
width: 971px !important;
}
Maybe the css rule is forced to fit the screen.
The .container contains floating elements. De #content .container uses a overflow: hidden, but the #home-feed and #footer .containers doesn't have this declaration. The overflow: hidden will force the parent div to "see" that there is content inside. There are some disadvantages, but maybe it will do the trick.
Extra tip: why don't you use a css framework with a grid system like Twitterbootstrap, Foundation or Groundwork ?
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... */
}