Jump to content

Search the Community

Showing results for tags 'responsive'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL








Found 48 results

  1. Hello! I am quite new to CSS, and have learned much the past months, but I still have some things that trouble me and i struggle to find a sollution. I do work with div tags. Problem 1: At the right, you can see "New Comics" with an unorderd list consisting of two items at this moment. The date is "float: right". it shows good on my screen, and any other medium to large screen resolution, but once it gets to small, the date gets ON the border line. I tried: min-width:300px Result: It jumped UNDER the content that should be on the left of it. URL: http://www.nimblefeather.com/index.php Problem 2: The images here are floating right and left respectively. Again, on my screen, or any other large screen, there is no visible problem, but once you start resizing the screen, the text does no longer fit into the div's. I tried: min-width. Result: No visible change. URL: http://www.nimblefeather.com/comics.php Problem 3: When resizing the width of the comic images gets adjusted, but the height does not, resulting in well, a weird image. The height should also change accordingly. In addition, on smaller screens the word (heading1) Chapters sometimes sticks out of it's Div. How would this be solvable? URL: http://www.nimblefeather.com/comics/drawingshady/thefutureofsumarnya/chptr1.php Question: Is it possible to make the website appaer like on my screen on other resolutions as well? By simply "resizing it" to their resolution (example: My resolution: 800 x 600, and visitor X resolution 400 x 300, to let the CSS resize the page to 50%, including text and images,...?) Thanks in advance =D
  2. I have a php based website script which I want to make responsive. What are the ways to make it responsive? I am not a developer so need an easy way. I know a little bit of html and css. Download the template from https://www.dropbox.com/s/pfolvxhn9co2qd3/bluesky.zip?dl=0 to have an idea about the coding and website structure.
  3. I have a script developed in php. It is non-responsive. I want to convert it to a responsive website. Is there any free tool or software or step by step guide to do it? I know a little html and css, but not php. I was wondering if there is a place where I can import my existing template, apply bootstrap with one click and export. It is an open source script and can be downlaoded from phpb2b.com.
  4. Brenton

    w3 css

    Good morning guys, I am using your w3 css to build front end form in wordpress for users to add content. While everything is looking great I am having a problem with the text area. Is there a way to make it as responsive as the normal input field? I have tried just creating it with <textarea></textarea> but it doesn't look asnice as the rest of the form. Thanks Brenton
  5. Hi! I modified the wordpress slideshow to make it much nicer looking and added text below, however, I am having a horrible time with the responsive aspect of it...the location of the control buttons (to move the show forward and backwards), as well as the simple text block below the slides move an enormous amount depending on the screen size! Is there anything I can do to make the location of these elements dependent on each other so that they re-locate accordingly? Otherwise, no one is going to be able to view the slides! The page I am talking about can be found here: http://annascherman.com/made-in-birmingham/
  6. HI: I have a responsive web design with links to pages at another website, which is a site that is NOT mine. However, the pages at the other site have 2 different URLs. For example: (www.thispage.com/page-1.html or www.m.thispage.com/home.html, as a reference to a mobile page) . In other words, one link at the other site is for desktop viewers and the other link is for mobile users, but all links meant for desktop users are redirected and go directly to their home page (not to the mobile equivalent page). If a user at my website clicks on a link to their website from a mobile device, they are clicking on a link meant for desktop users. But if the user is at my website on a mobile device, the other website redirects them to their mobile "HOME PAGE", thus requiring the user to navigate to the specific page FROM THE HOME PAGE OF THAT SITE. [NOTE: I have the direct links to the specific mobile pages at the other site, but just don’t know how to give my mobile users the option to access them from a single click.] I want my mobile users to be able to go directly to the specific page of the other site without having to navigate to it from the home page of the other site. In short, if my user is on a desktop, they will go to the correct page. But if on a mobile device, they will go to the home page (not the specific page) of the other site and have to navigate to the specific page from there, which can be a real hassle. Here is my question: Is there an inline html or javascript code I can add to each outgoing link that will take the user directly to the specific page I want them to land on if they are using a mobile device instead of a desktop? For example: href = www.abcd.com/page.html (but if less than 800px) go to www.m.defg.com/page2.html. Please keep in mind, my site is already responsive, so I do not need a redirect for my pages, as they are mobile ready. I just need to create redirect links to the pages of the other website if my user is on a mobile device. Please help. Thank you.
  7. Hi everyone! I'm using the "Electric Multi-Purpose HTML5" theme from ThemeForest and I have to limit the width to 1000px instead of 1300px which wasn't a problem to change in the css file of course. http://treacle.faceversa.net/assets/custom/css/style.css The boxed layout has changed to 1000px now but some parts like the portfolio do not adjust to it, as it can be seen in the screenshots below. Or here: http://treacle.faceversa.net/ At first I thought I could fix this via breakpoints, but there are only breakpoints for the screen sizes 400, 768 and 992 included. When I bring the browser window to a size of about 1170px everything looks fine (picture below). I would like to know what is influencing these adjustments if it is not a breakpoint. Are there relative css attributes used? Could someone tell me which attributes I would have to change or if there is a global parameter to make these adjustments happen, even if the browser window is bigger than 1170?... I hope its understandable what I would like to do; it would be awesome to get some help; I was working on this for so long now and the author of the template doesn't respond.
  8. Hi again, thanks for some respond in past question really feel helpfull to discuss here. let me describe my problem i set images in front end for original 383 px * 533px but then realize that my client has photo 2024px * 2559px, succesfuly make it responsive but not good looking sprawl but the point is really near with responsive, here is my old css for 383 px * 533px /*large desktop*/.img-header { height:auto; width:250px; top: 0px; position: absolute;}/*landscape tablet*/.img-header { height: 240px; width:180px; top: 10px; position: absolute;}/*Potrait tablet*/.img-header { height: 210px; width:160px; top: 20px; position: absolute;}/*landscape phone*/.img-header { height: 200px; width:160px; top: 10px; position: absolute;}/*portrait phone*/.img-header { height: 130px; width:110px; left:0px; margin-top:-20px; margin-bottom:10px; position: absolute;} so any idea to make this images to responsive with original size from my client, what should i use for keep responsive used % or px, any link or explanation will be apreciate, Thanks Freddy
  9. The columns are showing full width in IE7 & 8 even though i have set to 'col-sm-4'. i have used bootstrap files n respond.min.js locally inorder to eliminate probs caused by CDN links.. <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="bootstrap.min.js"></script> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="respond.min.js"></script> <![endif]--> <title>Untitled Document</title><style type="text/css">.container-fluid { background-color:pink;}</style></head><body><div class="container-fluid"> <h1>Hello World!</h1> <div class="row"> <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div> <div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div> <div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div> </div></div></body>
  10. I find this tutorials very useful and I think it will be really handy if you do Bootstrap tutorial. On site getbootstrap.com is nice documentation, but some things aren't explained so well.Who think this is good idea? Thanks.
  11. Hi! My site's navigation looks and works pretty clean for computer use and viewing but when I pull it up on my iphone it's pretty sloppy.. I am looking for a way to code it for mobile devices so its a clean responsive look and user functionality isn't difficult to figure out.. Here is the site.. www.asamusic.us Thanks!!
  12. Hi, I'm in the process of making a todo list app in HTML5. This is how it looks at this moment: I'm not a HTML coder so I first wanted to see if I could do the interface in CSS. I use border-image to handle 9 slicing and I'm happy with the result. The interface is fully responsive so I can scale the main DIV and everything scales accordingly (when scaling horizontally buttons will grow larger filling the space etc). The second part of my quest now is to make the relevant buttons clickable and linking on a weblink with preferably a mouseover and mousedown effect and this is where I'm stuck. My requirements are as follows; - The solution should work with the responsive aspect of the tool; the clickable zone should scale up or down automatically. - The text contained in the buttons should not affect the clickability or change the mouse pointer unless its the weblink mouse pointer (problem visible in example bellow). Nice but not required; - It would be great if the solution allowed me to tweak the clicking zone manually once(that will work well when the button scales). For example I have buttons with quite large shadows and I might want to avoid having the shadows clickable, instead I would substract a couple of pixels down and perhaps left and right from the button's DIV area. I've made a simple test page with the border-image method and my buttons images if anyone wants to give it a shot. Here's the JSFiddle page: http://jsfiddle.net/gYLn8/ And the html code: <!doctype html><html><head><meta charset="utf-8"><title>Untitled Document</title><style type="text/css">.MouseoverButton { border-width: 15px 21px 17px 20px; /* border-image: url(http://www.stormunited.com/images/test/Screen.png) 35 35 35 35 repeat; */ /* -moz-border-image: url(http://www.stormunited.com/images/test/Screen.png) 35 35 35 35 repeat; */ -webkit-border-image: url(http://www.stormunited.com/images/test/Button_UnPushed.png) 15 21 17 20 repeat stretch; position: absolute; font-style: normal; color: #B94400; text-align: center; padding-right: 73px; padding-top: 47px; left: 63px; top: 108px; font-size: xx-large; cursor: hand;}body { background-color: #2A2A2E;}</style></head><img src="http://www.stormunited.com/images/test/Button_UnPushed.png" alt=""/><img src="http://www.stormunited.com/images/test/Button_Hover.png" alt=""/><img src="http://www.stormunited.com/images/test/Button_Pushed.png" alt=""/><body><div class="MouseoverButton">Button</div></body></html>
  13. there is a div id =certificate and inside that div there is a image ,image height < div heightpicture below shown theseactual sizes of div,imagefor responsive design when browser resize image size need to vary.when browser width reducing image need to be small without changing its aspect ratio . i mean it has to be like picture belowfor that i used for image width 100% now image is responsive but it has a another effect on image width it is image take all the width of certificate div.it leads to change aspect ratio of the image.its shown belowfor responsive design i need a way to keep aspect rato of the image and also image will not exceed the parent div sizehere is my code both html and css html code <!doctype html> <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]--> <!--[if IE 7]> <html class="ie7 oldie"> <![endif]--> <!--[if IE 8]> <html class="ie8 oldie"> <![endif]--> <!--[if gt IE 8]><!--> <html class=""> <!--<![endif]--> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="screen"/> <title>abc</title> </head> <body> <div class="wrapper"> <div id="certificate"><img src="images/roundlogo.jpg" alt="" /></div> </div> </body> </html> css code @charset "utf-8"; /* CSS Document */ #certificate { width:950px; border:2px solid; } #certificate img { padding-left:50px; } .wrapper { width:950px; margin:0 auto; } @media screen and (min-width:181px) and (max-width:950px) { .wrapper { width:100%; } #certificate { width:100% } #certificate img { padding-left:5.263%; } }here is my fileshttp://www.speedyshare.com/m38eN/New-folder-2.rar
  14. I have an image with the following css properties. img.mainImg { width: 100%; height: auto; max-height: 1000px; } This causes the img to resize with the browser window, while keeping it's height to width ratio. This is almost the desired effect. What I am trying to achieve, however, is for the image to stop resizing once it has reached a certain width, and then start to crop the image instead. Can this be achieved with CSS, using media queries?
  15. What is the best way to acheive a responsive vertical centered position of an element within an element (e.g. a div within a div)? I know this would probably be a lot easier to accomplish using JavaScript, but I want to know of the best ways to do it with CSS first.Any help would be appreciated.
  16. Dear people I'm new here and I'm making my first steps in responsive design. I'm not english speaker and I will try to explain my problem in my better english. I'm testing a simple grid of 4 columns using 4 divs with width = 23 % (each div) and left and right margins = 1 %........ margin: 0% 1% 15px 1%; padding: 0% 0% 0% 0%; In other words..... 1% + 23% + 1% + 1% + 23% + 1% + 1% + 23% + 1% + 1% + 23% + 1% = 100 % ------------------- ------------------- -------------------- ------------------- All this works fine in Internet Explorer, Mozilla, Opera and Safari and each div have the same separation respect the neighbor div,..... ... BUT THIS NOT HAPPENS IN CHROME!!!! After this, I tried usig PADDING: margin: 0% 0% 0% 0%; padding: 0% 1% 15px 1%; and the results are different. With "Padding" it works fine in Internet Explorer, Chrome, Mozilla and Opera and each div have the same separation respect the neighbor div... ... BUT THIS NOT HAPPENS IN SAFARI!!!! I can't understand why this happens because it is a very basic concept... margin... padding.... there are no complicated things. I attach the TESTING MARGINS AND PADDINGS.zip file containing a folder with html and jpg files to you can view it. HTML files contains the CSS code into each html file. I think the margin solution is better, but my question is: How to make only for Chrome ...... that the CSS code specify the use padding in place of margins?? Do i need to use some prefix like -webkit- , etc? I hope you can help me to solve this. Thank you in advance!TESTING MARGINS AND PADDINGS.zip GusSiglo21
  17. Hello, I really need some help concerning multiple responsive background images. I am creating a one page website with wordpress that contains of 6 sections and each should have a background image and over it should be some content (like text) Well I have tried several things and in my latest version it scales the background image in proportion but it cuts some parts off the image when the browser window is smaller <div id="sec_5"> <div class="span5"> <div class="txt_left"> <h2>SOME CONTENT</h2> <p>SOME CONTENT</p> </div> <!-- ende div txt_left --> </div> <!-- end span5 --> </div> <!-- ende div sec_5 --> #sec_5 { padding-top:43,8%; max-width:1920px; height:auto;}.span5 { background-size: 100% auto; background-size: cover; background-position: center center; vertical-align: top; background-image: url('images/page5_bg.jpg');} I also tried to give the background-image a specific height but then of course if you scale it down- it works perfectly without cutting off the image- but the height remains... I really don't know how to solve this issue! I'd appreciate any help!! =)
  18. Hi! I'm experiencing a wierd thing when I open my website in Firefox and Opera. The images loading in with a preloader is shown at actual size shortly before resizing to percentage-size according to my CSS. In Chrome the images appear as they should right from the start. What's the problem here?http://mace.macework.se/trycksaker/ Grateful for help!Thanks
  19. My site has a custom home page template which by default had 2 items, a text and an image. I changed the style of these 2 items to make the image bigger and the text smaller, but now when the site stacks the items for a responsive view the items don't automatically resize to fit the new space as they used to do before I made my changes. The site is http://thestupidforeigner.com if you resize your window you will see what I mean, it looks horrible. Any ideas why? I changed the style from .col-460 { width: 48.936170212766%;} to .col-c35{ width: 35%;}.col-c65{ width: 65%;} If you need to see the php it's like this: <div id="featured" class="grid col-940"> <div class="grid col-c35"> <p> <?php if ( isset( $responsive_options['home_content_area'] ) && $db && $empty ) echo do_shortcode( $responsive_options['home_content_area'] ); else _e( 'Your title, subtitle and this very content is editable from Theme Option. Call to Action button and its destination link as well. Image on your right can be an image or even YouTube video if you like.','responsive' ); ?> </p> </div><!-- end of .col-c35 --> <div id="featured-image" class="grid col-c65 fit">
  20. Nabil ab

    Positioning trouble

    hi everyone, I just want to ask the professionals use is very simple question about CSS positioning step ahead of myself I started learning css a few months ago it was very very easy to me there was nothing complex about it at all. well not until I reach the positioning in CSS they will like a living ###### to me well of course I could understand that simple values which are fixed relative, absolute, and static and how the work and the relation between the relative and the absolute values. but one thing that I died understand in positioning is that when you position an element in html you need to position it according to let's say the full screen mood that's mean when you want to make the browser tab is in the full screen of your computer screen, but if you played with tab of the browser like you want to decrease or increase the size of tab the position will change now. so how does these positions work I don't know how they work when we can implement them in any HTML page. and also one more simple question is that if I want to center an elements like a box in the center of the HTML page but when I play with the tab at the dimensions it don't change from its position it stay and remains in the center of the HTML page not caring about the decreasing or the increasing of that tap dimensions.
  21. I am currently building a wordpress site for a friend and have downloaded a responsive theme that he likes and that seems easy (for the most part) to work with. However, I need to make a fairly big change and have little idea of how to do it (I know the basic html and css, but not much more). The website in question is dev.rjthompsonmusic.com If you look at that site, you'll see that there is a search box in the header next to the social icons. The search box is responsive and jumps to the very top of the page when you view it on a mobile / shrink the screen down. I want to replace this search bar with a Mailchimp email subscribe box, **whilst retaining the minimalist look and responsive design of it**. How would I go about doing this correctly? Basically I just want to change the search box into a field where you can enter your email address and and press enter to subscribe... exactly the same as it currently looks, but with the different functionality. Here's the header.php file (I don't know if this controls the mobile layout as well though): <!DOCTYPE html> <!--[if lt IE 7 ]> <html class="no-js ie ie6" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 7 ]> <html class="no-js ie ie7" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 8 ]> <html class="no-js ie ie8" <?php language_attributes(); ?>> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" <?php language_attributes(); ?>> <!--<![endif]--> <head> <meta charset="<?php bloginfo('charset'); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><?php wp_title(''); ?></title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>"> <script>document.documentElement.className = document.documentElement.className.replace("no-js","js");</script> <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic|Fjalla+One' rel='stylesheet' type='text/css'> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="<?php echo get_template_directory_uri(); ?>/js/ie/selectivizr.js"></script> <![endif]--> <?php wp_head(); ?> </head> <body <?php body_class(); ?>> <?php echo wpb_page_background_image(); ?> <div class="body-wrapper"> <header id="header"> <?php if ( wpb_option('header-widget-ads') ): ?> <div class="ads-header group"> <div class="container"> <div class="grid one-full"> <ul><?php dynamic_sidebar('widget-ads-header'); ?></ul> </div> </div> </div><!--/.ads-header--> <?php endif; ?> <?php if ( has_nav_menu( 'header' ) ): ?> <nav class="nav-container group" id="nav-header"> <div class="nav-toggle" id="nav-header-toggle"><i class="icon-reorder"></i></div> <div class="nav-wrap"> <?php wp_nav_menu( array('theme_location'=>'header','menu_class'=>'nav container group','container'=>'','menu_id'=>'','fallback_cb'=>FALSE) ); ?> </div> </nav><!--/#nav-header--> <?php endif; ?> <div class="container"> <div class="pad group"> <?php echo wpb_site_name(); ?> <?php echo wpb_site_desc(); ?> <?php if ( !wpb_option('disable-header-search') ): ?> <div id="header-search" class="group"><?php get_search_form(); ?></div> <?php endif; ?> <?php if ( !wpb_option('disable-header-social') ): ?> <?php echo wpb_social_media_links(array('id'=>'header-social','class'=>'social-module')); ?> <?php endif; ?> </div> <?php if ( is_home() || is_single() || is_archive() ) get_template_part('partials/newsflash'); ?> <?php if ( has_nav_menu( 'subheader' ) ): ?> <nav class="nav-container group" id="nav-subheader"> <div class="nav-toggle" id="nav-subheader-toggle"><i class="icon-reorder"></i></div> <div class="nav-wrap"> <?php wp_nav_menu( array('theme_location'=>'subheader','menu_class'=>'nav container group','container'=>'','menu_id'=>'','fallback_cb'=>FALSE) ); ?> </div> </nav><!--/#nav-subheader--> <?php endif; ?> </div><!--/.container--> </header><!--/#header--> <div id="page"> <div class="container"> <div class="container-inner"> ....and here is the Mailchimp generated form code (including labels, which I don't want... I just want the functionality of the form whilst keeping the look of the search box): <!-- Begin MailChimp Signup Form --> <link href="http://cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css"> <style type="text/css"> #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; } /* Add your own MailChimp form style overrides in your site stylesheet or in this style block. We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */ </style> <div id="mc_embed_signup"> <form action="http://rjthompsonmusic.us4.list-manage.com/subscribe/post?u=86729b354d1a75a35e8fd9771&id=bd9f282fc3" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <label for="mce-EMAIL">Subscribe to our mailing list</label> <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="email address" required> <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div> </form> </div> <!--End mc_embed_signup--> Remember, I literally just want the email field with some text asking people to enter their email address and press enter. Any help would be amazing. Thanks so much in advance. HT
  22. Hi, can anyone help me solve this puzzle? I'm working on a design that uses full-width headers and footers but has fixed width content in the central framework, but it's behaving a little badly. See example: http://wildflowerpr.net/services On the surface, all seems to work fine, but when you reduce the browser window to, say, 50% of the width, there is an unwanted effect: i.e. you can scroll across to the right, and you'll see that the header and footer have been artificially 'cropped' giving a messy effect of a white space margin running down the right of the page. Not pretty! I don't want this cropping. I can kind of see what's happening, in that I'm effectively asking the browser to match the header / footer width (100%) to the width of the window, but by keeping my main content central and fixed width (1100px) it's confusing things. However, I'm not sure the best way around this. As you can see, my design has many layers and collumns, which I want to keep. Should I change my design radically? I've been reading a little about responsive / collumn based designs and wondered if I should change it. It's hard to do this with all the layers and the effects I've designed though. If it's of any relevance I'm working in Thesis 2.0 in WordPress. Appreciate any help - thanks in advance!
  23. Hi,I don't know if this is possible, but, I am getting back into web design and don't know how to do this. What I am attempting is quite a simple idea, I have a background image I created in photoshop with its "flicks" & "flares" and what not. I have set it as a part of my banner_bg in my responsive CSS code, but, what is happening ( of course this would be the problem I face) is the background image is re-sizing to fit in the fluid design. What I want it to do is stay static, and simply Crop the areas outside of the devices boundaries. So that I dont loose the effectiveness of my logo and don't impede on the image's visibility. And no, before anyone asks, I do not want to have my logo separate as my design has taken several months to perfect and incorporate into, what I would call, "A Fluid Crop Design". Would have been good to see if I could get the code first though, haha.I hope this isn't too vague. I have seen it before but can't remember where. Does anyone have a code to help me, or, does anyone know what I'm actually talking about? Thanks in advance to anyone who posts.
  • Create New...