Tag Info

New answers tagged

0

I believe the full answer to your question can be found here: http://stackoverflow.com/questions/2025282/difference-between-px-dp-dip-and-sp-in-android To convert dp to px you need to take account of the display dimensions you are addressing to. The greater the DPI, the more pixels you'll have to cram in the same area to make it look good and to avoid ...


1

Your'e CSS is not specific enough from the sound of things. You need to remove the spaces in the selectors. section .inner { margin-top: 1.5em; } All <section> tags followed by a class of inner. Add the margin to anything within a <section> which has the "inner" class. div .inner { padding-top: 1.5em; } All <div> tags followed by a ...


0

I would suggest use retina images in website.This is best way.Please see this link. http://imulus.github.io/retinajs/ The reason of images see blurry images in mobile. http://www.alaress.com.au/2011/04/developing-for-high-dpi-devices/


3

I managed this with just css, with pseudo-elements and the transform: property. It ain't very pretty, though, and needs some tweaking the numbers to be snug and symmetrical. .foo { display: inline-block; padding: 10px 30px; border-top: 2px solid orange; border-bottom: 2px solid orange; margin-left: 100px; margin-top: 100px; ...


5

Can do it with 2 divs and before and after pseudo classes..... jsFiddle HTML: <div class="container"> <div> Test Container </div> </div> CSS: .container{ width: 200px; background: #FFFFFF; border: 1px solid #f00; border-left: none; padding: 4px; position: relative; min-height: 40px; ...


0

If you can change the HTML/markup: just add a class to those two particular elements and style that. If you can't: Use nth-child or preferably nth-last-child(n). The latter will count backwards from the last child-element instead of forwards from the first. The code below would select the last two li elements in a ul container with the class main-nav ...


4

I've managed to achieve what you're after. First off though, your code was very messy and in future you should prune/clean it before asking others to help you fix it. I took a 15 minute look at your code to understand it, and then rewrote the parts you're asking about with much less mess. This is what I get with the structure I've prepared for you: The ...


0

To be honest I don't really see the problem. Upping the resolution of that particular image should not mean a very much larger file size. At least not if you compress it right. In any case, your best option is probably to use media queries as listed here: For including high-res graphics, but only for screens that can make use of them. "Retina" being ...


-1

I would suggest you create svg file from original logo creative


0

I would suggest you export your logo as an .svg file to fit in retina devices if that is your intended target. Since SVG isn't fully supported across all browsers I would suggest implementing PNG fallback: <img src="logo.svg" onerror="this.src=logo.png"> if (!Modernizr.svg) { $("img[src$='.svg']") .attr("src", fallback); } SVG Fallback per ...


-1

1.-You shall use a image type "png" for drop distortions(Use Natural Sizes for mobile devices). 2.-check resolution screen mobiles. now days resolution screen is great 3.- Use tag for mobile browser not change resolution ( Use custom with to mobile devices) <meta name="viewport" content="width=device-width,user-scalable=no"> 3.-Use custom css image ...


1

I don't know how the screenshot service that you linked to works, but it probably uses a headless browser like PhantomJS to render the page and then to capture a screen shot. PhantomJS uses WebKit, the rendering engine that is used by Safari and the basis of the Chrome rendering engine. Your site uses parallax scrolling which might make this task difficult. ...


0

To answer your boiled down question, while often times this isn't needed—or in fact will take more design/development time—but in your example case there can simply be a narrow crop of the image (with retina @2x versions too) for the mobile layout. That's the beauty of CSS media-queries, that you can include specific versions of the image a wider range of ...


3

The dimensions are variable. User Joojaa is correct when they say that "You can no way know what size or shape the recipients screen is going to be." You cannot set any explicit value in your CSS, because if you want to consistently support all browsers, you have no way of knowing what size it's going to be. I'm going to give you one method, using just ...


0

What do you mean by "it does not scroll vertically"? That you do not want it to scroll vertically, or that for some reason it is "fixed"? There is no such thing as guidelines for web page withs and heights anymore. As user2725502 and Joojaa points out: the massive variety of devices makes this wildly impractical if not directly impossible to do sensibly. ...


0

These days webdesignerd tend to use responsive values. So make it responsive by using %. Although this makes using images tricky


2

They are called «Single-Page Websites». The Animation Effect you see is called: «Parallax Scrolling» The appearance has absolutely nothing to do with WordPress. You can do this with any CMS, or with no CMS at all. Things to think about when using this kind of design: It's already overused Altough it's quite fast to create because you don't have to think ...


2

In the agencies I worked in, we always called them "One-Pager". The coding of these pages is very easy since, as @Yisela mentioned, all the content is stored in one file (mostly). In my opinion it doesn´t really make a difference whether you use a CMS or not. And since most of these pages have static content and are for promotional stuff that doesn´t change ...


3

I'm not sure this style has a particular name. I believe its origin could be in parallax scrolling sites, when you could use navigation buttons to "jump" to a portion of the the page that, as a section, used the whole screen height. They can also be referred to as Single Page sites, because most content is available on a single file. Some examples of ...



Top 50 recent answers are included