I am building a personal site using a Zurb Foundation template (blog) and I have a resize issue. Basically, I wanted to make it responsive but I guess I messed it up along the way. I placed the footer in a larger container, and on resize it's not positioned where it should.
If anyone could help me keep it down, I would be grateful.
Here it is:
http://arbal.netii.net/
All of the height:100% values seem to be the problem. You may need to override them in a media query so they are reset to default on mobile.
Related
I just finished my new custom Bootstrap Wordpress theme and added a carousel. It works fine, except it's not responsive. The images get pulled out to an unwanted height. I tried everything, but I can't seem to fix it.
Here it is on my website (with uncompressed css): http://your-juliet.net
Does anyone have a clue? I won't mind removing the caption on the carousel in smaller resolutions (but I rather not). Thanks so much!
Fixed, deleted all the custom styling and put the carousel in a col
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 just started with ROR and I'm following the One Month Rails tutorial. This includes the Bootstrap responsive navbar. I now added some pins to my pinterest clone. I noticed that the scrolling does not work when the navbar is in full size. when i make the browserwindow smaller so the navigation gets into the small navigation symbol i can scroll the page. You can probably see best on my heroku link: morning-shore-7790.herokuapp.com
It would be great to get a hint on how to solve this.
Thanks a lot
Looks like you've nested the container class inside the navbar, which will always cause this behavior.
If you're using ERB it means you didn't close a div where you should have, if you're using haml or slim it's most likely an indentation oops. If you use chrome, safari or firefox you can see this clearly, just inspect the element and collapse the navbar, if all other content is contained within that, you still haven't fixed it.
If you still have questions post your layout and your index.
I have a problem with my page. Whenever i minimize the window all the positioning of elements goes off and things get distorted. Please help me. Am using bootstrap elements.
You need to fix a width/min-width to your principal wrap. I think it will fix your problem.
remove the file "bootstrap-responsive.css" from your css files if you're looking for a more "static" website. You might want to read up on responsive design... having a website that isn't responsive helps to alienate potential mobile users... that's just my two cents.
I'm having trouble with my website here: (solved)
The problem is that when I make the window too small the content starts moving around. I'd like to make it so that it stays in one place even when the window is re-sized.
I'm using a wordpress them so something must be interfering with what I've already tried but I'm not sure.
I've tried making a wrapper around everything, and giving it a min-width, it still fails to work. I've also tried setting the position to fixed of this wrapper, the main content, and the sidebar, which also didn't work very well.
I'm kind of stumped as to what it could be. If anyone could help me out, that'd be great.
Thanks!
Its the media queries that are causing the problem. All of your site is trying to fit in one column if there isn't enough room for it side by side but the fixed sidebar is messing with it. Disable the media query or apply styles for the sidebar to become display: block; below the width set and it should be fine.
Starting on like 871 of the stylesheet there are media queries that change the style of the page based on the width of the browser window. You can either delete these or restyle them as you would like for tablets, phones, etc…