I want to make my site responsive with only css I'm new to designing please help me, how can I make it responsive with only CSS?.
I tried using media query but it didn't work for me or maybe I don't know how to use it.
I am copying this Site: https://www.portfoliobox.net/
I know above site is made using bootstrap but I am doing it with html and css only.
Check out mine it messes up when screen size is change.
https://portfolioboxcopy.000webhostapp.com/
And tell me if i'm doing any mistakes. Thanks!
A few tips on how you could improve your site, and make it responsive:
Avoid inline styles as they are hard to manage. Put your styles in a .css stylesheet and link to the stylesheet in a link tag somewhere before the closing </head> tag in your HTML document like so:
<link rel="stylesheet" href="styles.css" />
To make your site responsive you should use percentage widths as often as you can and media queries to adapt your design. Media queries should be added as separate style rules, e.g:
.bg1 {
margin: -10px -8px 0;
}
#media (max-width: 500px) {
.bg1 {
margin: 0;
}
}
Avoid spaces in filenames like with your image "bg (1).jpg" as spaces are not allowed in file url's. Try something like "bg_1.jpg" instead.
Consider moving your current "header" element into a new wrapper element. This will make it easier to create a header area with a set height that can be changed with media queries. I recommend removing your "bg1" element and using the image in background-image: url(); on the new wrapper element described above.
Related
I simply want to reduce desktop view width slightly but can't get it to work with media query. My latest attempt is
#media (min-width: 992px) and (max-width: 1199.98px) {
html, body {
max-width: 80%;
}
}
but it has no affect. I don't think I want to mess with container b/c that would leave out the navbar. Using my own stylesheet (added below bootstrap cdn stuff) rather than using the media queries directly in template.html but I don't know if that makes any difference. Am I trying to do this the right way or am I completely missing something?
You don't want go banging around on high-level elements when using a layout library. This limits what you and others can do in the page later (say you want a full-width banner somewhere). You also probably don't want to casually override all instances of a Bootstrap class.
In this case, look at adding a custom class to the .container or .container-fluid element, limiting its width:
.container.narrow {
max-width: 80%;
}
Use that for any containers where you want a narrower width, and use containers without that class for wider content.
<div class="container narrow"> ... </div>
Whether you apply this in a media query is probably immaterial.
I was strugglng to find the answer to my screen not working correctly for the mobile and below answer from you worked like a charm. Thanks so much for your answer. I removed the meta-name line and it worked like a charm.
Mohan
#Beanic
I presume that you have added the viewport tag for that() –
Jan 22, 2020 at 12:50
My website is www.dreamzabroad.in,
I want to make it mobile responsive. Like when you visit the homepage the slider is placed beneath the header logo, i want to push it down and make the heading tags fit to the mobile display?
One of the simplest ways to make your website responsive is to use Bootstrap. Use this link as a starting point:
http://getbootstrap.com/getting-started/
You will need to include the bootstrap files on your website and use their classes which you will find on their website in order to make your content change widths and fall under each other on different screen sizes.
You want to look into media queries, which will allow you to change your CSS based on certain conditions.
If this is too daunting you can simply use a framework such as Bootstrap which has done the groundwork already, you just need to add the relevant documentation.
Use Bootstrap media query or simply use custom media CSS properties.
for bootstrap you can simply use CDN link like as below in your index style tag to use CSS without downloading in your project and then just apply available classes in your code.
<link rel="stylesheet" href="./contact_files/bootstrap.min.css" />
Add below Media CSS according to your device width in style tag of your index or main achieve responsiveness.
#media screen and (max-width: 600px) {
body {
background-color: Yellow;
color: Pink;
}
}
#media screen and (max-width: 711px) {
body {
background-color: Green;
color: Red;
}
}
References:
https://www.geeksforgeeks.org/bootstrap-media-queries/
I am currently making a website for my college project and I want to make it as good as possible. I basically want to have several HTML pages for my website which I have setup but I want to use only the one CSS page. So basically if I edit one page, for example my second page, how do I change the look of it without editing any of the CSS for my first page. I have tried several things but I honestly have no idea.
Any help is appreciated and thank you in advance.
You cannot just change the layout of each page in CSS, CSS is not aware of what the page you are at.
Either do you change the layout by changing the whole CSS file. Or you try to put the CSS special functions for that page inside the page elements.
Otherwise you can't do that!
For example:
You can create a single CSS file and link it as:
<link rel="stylesheet" href="site.css" type="text/css">
Then in each page, where you want the style to be different you can change the style inline:
<element style="property: value; property_2: value_2;"></element>
Like this!
How about adding a class to the body tag on the second page, then specifying the style that are just for that page by using the class.
Page one:
<body>
<p>This page is boring</p>
</body>
Page two:
<body class="page-two">
<p>That's a mighty fine body</p>
</body>
Then your CSS could be
p {
background: white;
}
.page-two p {
background: red;
}
If you have a lot of extra CSS to apply to the second page, then you might consider using LESS or something similar to make your life easier.
Your best method is to have an app.css file that has global settings like height, width... and then have specific page files index.css, portfolio.css.. that have specific styles like colors.
You can specify your button general style in your app.css, and then more specific styles in each page css file.
app.css:
button{
height: 30px;
width: 150px;
border: 1px solid purple;
color: purple;
}
index.css:
button{
border: 1px solid black;
color: black;
}
Add the app.css to each html file, and then only the specific page css file to each html file. This will make it easy to expand in the future.
You need to create a template for your HTML pages and then link an external style sheet in your <head> section of each page like this:
<link rel="stylesheet" href="mystyle.css" type="text/css">
Then for any special cases that are not part of the template, you can link additional style sheets. Just a side note, embedding styles in elements directly is harder to maintain than linking multiple CSS files.
If you are allowed to use JavaScript, you might like to use a JavaScript template engine like Handlebar.js.
The beauty of template engines is that you can define sections and create dynamic HTML. This may be more complex than what you're wanting here, but it is very cool.
A large list of template engines can be found here: http://garann.github.io/template-chooser/
I am trying to display a list of data in table on the desktop version of the website using tables. I want to condense the same for the mobile web. Should I use a separate block of html or can I convert the present tables for the mobile view.
http://play.mink7.com/h/startupsradar/pending.html
I like the following list view on mobile
Update
I modified the code according to the answers. Any idea how i can make the whole list as a whole as click-able as one block ?
You can turn an HTML table to different rendering, e.g. setting
table { display: block; }
tr { display: table; }
th, td { display: table-row; }
This would cause a completely vertical presentation.
The details of course depend on the markup and on the desired rendering.
You can convert the same block using handheld specific stylesheet attribute media="screen and (max-device-width: /* whatever */)" like this :
<link rel="stylesheet" href="whatever.css" type="text/css" media="screen and (max-device-width: /* whatever */)">
Or you can use #media inside your stylesheet
#media only screen and (max-device-width: /* whatever */) {
/* Styles goes here */
}
Media Info
P.S I just saw the source of nike.com, they are using the
stylesheet attribute for ipad.css stylesheet, have a look.
If CSS3 is acceptible, you can use media queries to create different styles for different dimensions and devices. You can create incredibly dynamic sites in this way.
In general, table data can stretch tables rows to an undesired length, going out of bounds of the table row. When dealing with mobile devices you will have limited px. You could either create a copy of your existing CSS Stylesheet and edit it slightly setting a min/max width for the table for when your site switched to mobile.
max-width: __px;
min-width: __px;
etc.
Or you could call a JS function on the event of the switch to mobile site appending the CSS
$('#tableName').css('max-width', '150px');
$('#tableName').append(div).css('max-width', '150px');
The JS version can be a little tricky to get going, I think that you should go with setting limits on the CSS.
Media queries i can suggest is the best solution for responsive design.
Let me give you a simple code for responsivenes based on page width.
Here in the code i have using the media queries for changing the para color based on the browser width. You can instead hide using style=display:none or change the size of the contents based on the browser width.
<html>
<head>
<style>
#media (max-width: 600px) {
#p1{
color:red;
}
}
#media (max-width: 400px) {
#p1{
color:blue;
}
}
</style>
</head>
<body>
<p id="p1" media="(max-width: 800px)">Hi , This text colour change according to browser size.</p>
</body>
</html>
you can find more tutorial simply here
I apologize in advance if I am asking asking question with impossible answer. But I just thought it was worth asking, maybe somebody knows how to achieve what I am asking for.
I have image on the page like this ( image url is generated dynamically on the server by PHP ):
<img src="/images_BIG/image_12345.jpg" />
Now - I would love to use only CSS media queries to change this image URL, let's say to this ( when browser viewport width is smaller than e.g. 800px ):
<img src="/images_SMALL/image_12345.jpg" />
I know this can be done by PHP (detecting mobile browsers and return appropriate URL) or use Javascript to change URL on the fly. But is this possible with CSS3 ? I am aiming only on HTML5 browsers so no need to care about IE.
Thank you for any thoughts and help in advance.
Wrap the image in a div. Use mobile first, so that it only downloads the small version of the image on small screens. On bigger screens, the image will be hidden and a background image will be there instead.
The two downsides - a non-semantic wrapping div, and the need to specify the height and width of the div. The upside is that you get the foreground image in the HTML.
The HTML
<div class="imgContainer"><img src="/images_SMALL/image_12345.jpg" /></div>
The CSS
// for screens bigger than 800px
#media screen and (min-device-width:800px) {
div.imgContainer {
background-image:url(../images_BIG/image_12345.jpg);
background-size:100px;
width:100px;
height:100px;
}
img {
display:none;
}
}
EDIT
Based on your comment above, I would say add the wrapping div and set its background image with jQuery.
You can set a different css file depending on your media queries:
#image1 { background: url('/images_BIG/image_12345.jpg'); width: 600px; height: 200px; }
#media screen and (max-device-width: 480px) {
#image1 { background: url('/images_SMALL/image_12345.jpg'); width: 300px; height: 100px; }
}
In this case, you would move away from an IMG tag to a different tag (<span id="image1"></span>).
Well, as I have read your comment...if the only problem is including variable urls into a css stylesheet...what about just php including (rendering) the stylesheet (wrapped with <style> tag) into the resulting html? Then you could use <?php echo $imageUrl ?> at the place of the url. I have never done this before, it might be a silly idea but it just appears possible to me now.