the answer might have already be somewhere, but chances are, that I might have overlooked it since I'm a 100% new to this (coding) and understand basically half of what I read :)
I'm currently making a website in Bootstrap, and I would like to exclude some elements in responsive mode/design.
Can anyone please tell me how to do that? Is there a specific line of (html?) code that I have to put before the elements that I wish to hide on say view on a phone?
Google hasn't been very useful.
Help is very much appreciated!
Take a look at the utility classes of Bootstrap 3 in the documentation here: http://getbootstrap.com/css/#responsive-utilities
Bootstrap includes utility classes to toggle content across viewport breakpoints. E.g. .hidden-lg, which when applied to a HTML element <div class="hidden-lg"></div>, hides the element on viewports bigger than 1200px (by default).
Thnx guys, I have found it :) Totally screwed up responsive by giving my container a fixed width, but I think I can figure that out!
Thnx a lot!
Related
I want to create a navbar like here: http://www.devoncrawford.io/
I couldn't figure it out how to interact with css elements through my ts code.
Maybe you can give me a tip, where I could research a bit more.
I would also love to get this autoscrollbutoon and just be able to interact with my css stuff.
I found a lot of jQuery stuff, but I am not familiar with it. Is that working in angular and should I learn it?
Thanks for your time. Sorry, it is a little bit general question, but I hope you can give me some advice
Check the below article which explain how to create sticky navbar using angular with good explanation and example
Ref:https://netbasal.com/reactive-sticky-header-in-angular-12dbffb3f1d3
Example:https://stackblitz.com/github/zetsnotdead/ng-reactive-sticky-header
I would use an windows eventListener to look at the scroll movement.
window.addEventListener('scroll', this.scroll);
After the scroll hits a number of vertical pixels, you could change the navbar background-color from 'transparent' to the color you want. (in the examples case '#fff'. You could make two different classes with the different background-colors and append or remove the css class.
Hope this helps.
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.
Hello and thanks in advance for reading, actually am having a strong issue with a long and thin carousel that is making me nuts :/. The thing is at this site http://gabouh.com/sitio/ the carousel with grey/white color when is resize the window apparently my css it reduces de carousel and looks fine, but if i go directly from an iphone or using mobiletest.me i can see how the site on the mobile is like in a page all thin and the carousel is going out of site, you can see it more specific in http://mobiletest.me/#d=iPhone_5_portrait&u=http://gabouh.com/sitio/
I only need to fix the issue with the responsive of the carousel, i don't know if i should post all my css but if any one could give me an idea of how to make it responsive. Am using bootstrap and am really stuck on how to fix it so any help would be really appreciated.
P.S.: Am already using css mediaquery but still in the resolution of max-width :767px it and adjusting my width of the ul of the carousel to width:100% and doesn't seem to work. If my approach is not good or you know a better one i don't mind checking other ways :D
Thanks again.
i see the code and simply wrap it inside a container and it will work perfect with you.
code:
<div class="container">
...... your carousel code .....
</div>
try this and i hope it will solve your problem.
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 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."