I have developed a website. It looks fine when i am resizing the browser window on my laptop but when I opened it in mobile browser, it set a horizontal scroll which makes it look weird.Any help is highly appreciated.
Link : https://dcheroes.uphero.com
If you want to develop in responsive you must need to use media queries
#media screen and (max-width: ** px) and (min-width: **px) {
}
And whenever you use width to outermost elements replace with it max-width. For more information read following articles
Max-width MDN
Media queries
This is called creating a responsive design. Creating responsive designs requires a whole lot more knowledge of HTML/CSS.
Learn about responsive designs and how to create them here: https://www.w3schools.com/html/html_responsive.asp
Have you thought about using Bootstrap, this can make creating responsive designs much easier as they've done much of the work for you already.
Learn about Bootstrap and how to use it here:
https://www.w3schools.com/bootstrap/
EDIT: My apologies, it looks like you're already using Bootstrap. But barely using it IE: you're not using <div class="container"> or div class="row"or classes such as col-md-6. I highly recommend if you're going to use Bootstrap you ensure you keep using their design language throughout.
Related
I don't really understand a proper way to ask this, sorry in advance if I lead to confusion.
I need to style HTML elements on my CSS page for mobile viewports and then add a comment where the mobile styles begin. From what I gathered from my book, styling the elements is just changing the fixed sizes to relative sizes, but the second part of the question leads me to believe that I need a whole new set of styles for each element, so how would I have one style for my main for normal view, and then a new style for main for mobile viewport?
Sorry yet again for horrible wording, and I'm not asking for any coding done, just some direction.
Use media queries! Here is the MDN page on them
For example, this will make all h1s red if the viewport is smaller than 600px
#media screen and (max-width: 600px) {
h1 {
color: red;
}
}
If I understand you correctly, you want to create a webpage that's also mobile friendly.
Twitter Bootstrap is the most popular framework for achieving this, and is used in almost every new web application.
I would suggest watching some Bootstrap tutorials on this. Derek Banas has really good introductory tutorials to show you how different languages/frameworks interact.
I wouldn't recommend him for an in depth tutorial on understanding all the in-and-outs of the topics of his video, but he's amazing at showing what the particular topic of the video is excellent at.
Your question isn't much clear.
Consider using media queries in CSS to work with your viewport.
See: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Maybe you like to use some CSS Frameworks to help you, like Bootstrap ou Materialize.
I recommend Bootstrap because learning is easier than Materialize.
I have developed my own introductory website in ASP.NET. I have used only HTML and CSS as I am not good in website designing. But the website is not looking good on mobile phone browser. Can anybody suggest me how can I use/update the same code so that it looks fine in mobile phone browser also without using bootstrapping explicitly?
My website link.
Asp.NET has nothing to do here with Responsive Web Design.
Just create CSS correctly that sets the elements where you want them according to the resolution and your good to go.
To target specific resolution use media queries: resolution
#media screen and (min-width: 480px) {
a {
color: red;
}
}
Also you can use your browser developer tools to see how your page looks in different screen sizes
Even if you do not want to use bootstrap or foundation, looking at their CSS to see how it operates is how I first learned to create responsive pages.
The core of bootstrap is referencing the page width as Pawel Lukasik mentioned above. At it's simplest above a certain width will have 1 style and below a certain width it will have another that determines the postioning / widths / floats of that content on the page.
In the case of bootstrap they have identified these various styles using the various 'grid options'
http://getbootstrap.com/css/#grid-example-basic
I suggest you take a look at the following link. It will give you a rundown on media queries that are used in CSS for responsive design. As mentioned above it is also a very good idea to take a look at the code for Bootstrap. It will give you an idea if how it achieves responsiveness, you can then try to create your own CSS to achieve the desired outcome.
I've recently been tasked with the of making a website for a department in my school. One problem I've encountered is that the webpage will appear differently on all screens and like to know if it exists some kind of tag or way in css to make it auto adjust on all screens.
There is no easy answer, certainly none that would fit here. Here's a good place to start:
Here is a good introduction to responsive web design, which will help you deal with how your sites will appear on different screen sizes, and different devices. Good luck.
http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design
Try using media queries. Please check:
Media Queries
Take a look at responsive CSS: W3Schools Responsive CSS. This includes information about how to make your own as well as examples of existing popular frameworks such as Bootstrap and Framework.
For the life of me, I can't quite figure out how this template is responsive without any extensive use of media-queries.
https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/
Anyone have any ideas?
I bought this template, and the responsiveness kinda broke while I was applying it and the author is not responding to emails.
I can't quite figure out how this looks so elegant on small screens particularly.
A webpage doesn't need to use media queries to be responsive. Responsive by definition means the elements adapt or "respond" to your device or screen size, instead of using a fixed or pre-defined width/height/arrangement regardless of the viewing device.
The link you pasted is certainly a "responsive" site, and they achieve this by allowing elements to have a fluid width (only with a max-width on the container, to make sure it doesn't keep growing if you have a very large screen, since that would look funny).
The way they do it makes your CSS code very simple and uncluttered from various viewport pixel definitions and media queries.
You can simply set max-width to prevent an element to be wider than required on large screens. Here is fiddle: http://jsfiddle.net/ur3futxp/
The site uses twitter bootstrap to make the site responsive. Bootstrap by default makes a site responsive using media queries if you use it grid system. Please refer the documentation http://getbootstrap.com/css/
This site is using twitter bootstrap framework which is developed to make the site responsive with all the devices without using any media queries as it already have predefined all the media queries in its framework and if you want to any more things to get responsive you must add your classes in your style.css file and make it sure that it will not conflict with twitter bootstrap predefined classes and you can do that by reviewing this site
http://getbootstrap.com
Does anyone know how to accomplish a different layout based on the browser width, like these two sites?
http://sasquatchfestival.com/
http://css-tricks.com/
I've tried to Google it, look through Stackoverflow questions, and look at their code but I think I am missing something. It actually rearranges and resizes some elements based on the width of the window, but how? Javascript?
Sorry if my search skills are just failing, but I'm not really sure what to look up, the "similar questions" here don't seem related, and even CSS-Tricks doesn't have the info in an easy to find place.
You don't need to use JS to detect browser width. You can simply use CSS media queries to alter the layout.
For example:
#media screen and (max-width: 1280px) {
... selector(s) here ...
}
Will apply CSS only to screens that are at most 1280px wide.
See also:
http://www.w3.org/TR/css3-mediaqueries/
http://reference.sitepoint.com/css/mediaqueries
You can use CSS3 media queries to deliver different styles based on the screen width. See here for more info: http://www.css3.info/preview/media-queries/
If you look at the CSS source of the sasquatchfestival.com site, for example, you can see what they're doing: http://sasquatchfestival.com/css/screen.css?v=1328828795. Search for "#media only screen" and you'll see they're delivering different CSS for widths below 768px, between 768-1024px, and above 1024px.
You can reinvent the wheel or merely build/rebuild your web site using one of the many responsive frameworks that are available. I have used both 'Skeleton' and 'Bootstrap by Twitter' Their frameworks can be found at...
Skeleton... [http://www.getskeleton.com/][1]
Bootstrap... [http://twitter.github.com/bootstrap/][2]
I have built sites using each...
Skeleton... [http://72t.net][3]
Bootstrap... [http://ReactiveWebDesign.net][4]
I'm still trying to decide which I prefer, but right now boot strap seems to offer more features.
May be a little bit of jMasonry in there, but it also looks a little like what Twitter Bootstrap provides in rails, it might be worth pouring over their static CSS version for answers.