I have a one page layout template and I'm having issues with only one div in particular on a split section. For some reason all my divs are responsive regardless of content except for one. It contains my profile picture underneath the hello section of my website http://dtcm.co.nz.
Can anyone suggest possible solutions or help me with this one, I have tried to include max-height:px height:% min-height:px into the css of the #media inquiries of each layout but nothing seems to be working..... maybe I've missed something really simple........
Related
I'm working on a responsive email design and running into some trouble. It partially works but I'm thinking I need fresh set of eyes and help cause I'm not finding the solutions. I think the nav links are what's creating most of the problems but unsure if that's really the problem.
Basically I want the email to be responsive and stack to pretty much a single column with exceptions.
The problems I'm running into are these:
Whole page isn't fully responsive - ( get sidescroll part of the way )
wide ads 565x70 doesn't seem to change size
Top nav with social icons are not stacking properly. I want the left links to not move (maybe center if needed for small screens) but social icons stack below the other links. 3 columns wide preferably just like they are now just want the icons below the menu.
nav menu below the logo - Here I want them to center with smaller screens but also stack in order with 2 columns wide. I've tried fluid text that wraps but it didn't seem to work for some reason.
Any help would be greatly appreciated. I've tested and tried other resource items but seem to be failing with what should work according to the other resources.
Below is the link to template.
http://bit.ly/1u67HDG
thanks.
Well, you will need a responsive css. I am a big fan of Twitter Bootstrap. You will design your entire email as a normal site with your tags and include your CSS.
Here you can look at these awesome CSS's that are responsive:
http://getbootstrap.com/
http://metroui.org.ua/
http://www.99lime.com/
http://purecss.io/
http://gumbyframework.com/
Your are setting inline widths on images and tables. The CSS in the header can't override the inline declarations.
Thanks. It seems that I mostly had each table on their own. So I created wrappers, double checked the widths re-added classes and etc. It seems to be working pretty good now.
Sometimes a fresh pair of eyes helps. Thanks again.
P.S. J.otero - Frameworks are good if you're using it for the web but they will do little to nothing for email.
I know little to nothing about HTML or CSS (but I am trying to learn little by little).
I am currently working on my professional portfolio and I'd like to break the website up a bit better than I have it now now (that is, with horizontal lines after each section). I've designed the website so that it is a one-page style site. However, it would be nice to change the content background for different sections of my resume, the about me (which I know needs more work, I hate talking about myself lol), and the contact me parts of the site. I'm thinking something along these lines, but much simpler.
I'm currently running Wordpress 3.8.1 and using the Highwind theme. I achieved the scrolling action with the Page 2 Scroll ID plugin. What you should be aware of is that all the content on the site is on a single page and the menu buttons merely point to different locations on the page by the way of divs. See this tutorial for a better explanation.
I'm not sure you're going to be able to get this happening with the Highwind Theme, or at least without some heavy customization of it.
The way the types of sites you're talking about work is that each section of the page has a 100% wide div with a 1255px wide div (the inside div could be anything really as long as it's not 100%) the inner div is centered inside the 100% wide outer div.
Here's a very quick codepen example...
http://codepen.io/catchlightWeb/pen/tpKrG/
For your example, instead of the SectionOuterOne and SectionOuterTwo classes having different colors, they'd have different background images.
Hope that helps.
I'm using Drupal. I have added a sitename and slogan to my kickstart sub theme which is a subtheme of omega. i then added a telephone number through the branding.tpl.php file. When I resize the window, the branding text moves down and behind the rest of the elements on the page - it doesnt push everything else down like i would like it to.
The site I am working on is www.mediamatterstechnology.com, please could someone give me some suggestions on how to fix the responsiveness of this branding section.
What I would like to happen is that when you resize the window, the branding section moves down as it currently does, but pushes everything else down with it, rather than disappearing behind other items on the page.
Thank you so much for any help with this
Your first problem is that <hgroup class="site-name-slogan"> has a specified height of 150px. Changing this to auto allows the text to expand into the space it requires.
This introduces a second problem though, in that the absolutely positioned menu widget interferes with it. How you solve this could have design implications though and there any many possibilities.
One solution is to force a bottom margin on the hgroup when the design is in the mobile version of the layout with the following CSS rule:
body.responsive-layout-mobile hgroup.site-name-slogan { margin-bottom: 40px; }
Developers made new checkout section on our website but the pages don't size to ipad or smart phone. There are checkout buttons and important elements on the pages that need to be seen by buyers, but they are being left off (pages cut off the right third of page) --
I've been researching briefly for a quick answer -- the rest of our site uses tables and this section uses css and divs only -- is that why it doesn't do it automatically? I'm not talking about media queries -- just the full page resizing to the screen width automatically...
I don't want to use scrollbars but even that solution at this point would give a visitor the ability to actually checkout on these pages...
Can anyone help? It would be greatly appreciated.. If it is more complex, that's fine, but I suspect something can be done to make the pages fit (and zoom if need be) or (gasp) scroll..fairly easily.
Thank you in advance for your help!
Ok, that section does not allow scrolling because is disabled from the css stylesheet.
You can get back the scrolling by editing the css. Look in the css file for the styles of .section. It will have a overflow: hidden; property. (it seem that is stored on file screen.css, line 435)
Replace it with overflow: auto;
You'll then be able to do horizontal scroll. But in the end, that is not a real solution. Since it seems you are not a coder, you need to get someone to recreate the styles of your website in order to make it actually responsive.
I recommend you to use on your website bootstrap, which can be used to create a responsive navigation.
I'm trying to make a sample web page to get acquainted with HTML5, and I'd like to try replicating Facebook's page layout; that is, the header that spans the entire width of the screen, a small footer at the bottom, and a three-column main body, consisting of a list of links on the left, the main content in the middle, and an optional section on the right (for ads, frames, etc.). It's neat and displays well in multiple window sizes.
So far, I've tried to accomplish this with a <header>, <footer> and a <nav> and <section> block, respectively. There's a few anomalies with the page, however. The footer (which contains a simple text block with copyright info) appears at the top-right of the page below the header when the window is maximized. On the other hand, when there isn't enough space to display everything in the window, it places the main body text below the section. In other words, it keeps moving elements around to fit the window.
Could someone please tell me how I'd achieve the look I'm going for? I've tried playing around with a few CSS attributes I read about through Google, but I'm pretty sure I don't know what I'm doing, and could really use some guidance.
Thank you!
This isn't an HTML5 question as much as it is a basic understanding of HTML and CSS. If you're going to jump in to web dev you're going to need to understand basic CSS like floating etc. I would recommend some tutorials on YouTube or NetTuts. Just play around with a few divs, move them around the page, manipulate them with CSS and it will start to come together. Then making a three column layout with fixed header and footer will seem like a piece of cake.
Floating Divs w/ CSS
I find CSS to be super hard. It is quite difficult to make a page that looks good and works on lots of different platforms and browsers. You may find it easiest to use a css framework, such as Bootstrap.
Drop that into your website, and use it to make your layout. Use the dev tools for your browser (Firebug for firefox) to examine the styles that are being applied to the various elements. Modify the styles to suit your needs.
HTML5 doesn't really give you a page layout for free. The elements you mention (header, section,etc) are used to create semantic pages, rather than to specify how they should be displayed.
Can't help much without your code. But I am sure it is because of float issue. add this CSS property to your footer clear: both
Hope it might help.
I'm not sure if you're trying to make yourself a little hack, or if you're looking for a complete library that will do all this for you, but if you're looking for the latter, I recommend Twitter Bootstrap, which is a cross-platform solution for implementing many HTML5 features, and even resorts to fallbacks for non-modern browsers. The only drawback is the requirement of jQuery in order to initialize the components that are responsive*. However, this is optional if you are not looking to implement these features. The responsive design, amazingly, does not require javascript since it is pure CSS. Hope this helps!
*Edit: meant "interactive" there, not "responsive."