Jump to content

Search the Community

Showing results for tags 'responsive'.

The search index is currently processing. Current results may not be complete.
  • 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








  1. Hi, I want to create a "Responsive Email" template which support all the device. Also will show in outlook, gmail etc. Please help me how can I create it? Thanks
  2. I am making a contact form in a new template liquid for a shopify website. Everything works and looks great in desktop mode but I've noticed as you drag the screen to a skinnier size some inline-block elements jump down perfectly as they are supposed to, the problem is other smaller text boxes are jumping up over other text fields to try and fill that gap. Also I've had issues with the legend and labels abandoning the text box they belong to jump up the form and fill space. Obviously I do not want this, how can I fix it?
  3. rj1102

    w3-col responsive?

    Why is the next code not responsive? I mean, if I make the screen smaller, the columns will stay horizontally. Or see the example on w3schools: http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_grid_percent&stacked=h. Also this example seems to be non responsive. <div class="w3-row"> <div class="w3-col" style="width: 40%; background-color: silver"> <p>[w3-col 40%]Lorem ipsum dolor sit amet.</p> </div> <div class="w3-col" style="width: 40%; background-color: green"> <p>[w3-col 40%]Lorem ipsum dolor sit amet.</p> </div> <div class="w3-col" style="width: 20%; background-color: red"> <p>[w3-col 20%]Lorem ipsum dolor sit amet.</p> </div> </div>
  4. Hello, I recently added different menu navigations for specific pages on my site: millcityenergy.com using the wordpress plug-in page specific menu items while it works fine for desktop, the mobile version displays all the pages in the dropdown (select a page). I've tried different custom css codes and as a novice, I have been unsuccessful. Screenshot attached. Any idea of how to narrow down the pages and/or follow the same navigation as desktop? Any help will be greatly appreciated. Thank you, Lauren
  5. 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
  6. 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.
  7. 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.
  8. 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
  9. 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/
  10. 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.
  11. 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.
  12. 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
  13. 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>
  14. 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.
  15. 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!!
  16. 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>
  17. 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
  18. 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?
  19. 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.
  20. 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
  21. 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!! =)
  22. 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
  • Create New...