My current website layout: Screenshot 1
I used a div with a wrap id to center the site:
#wrap {
width: 70%;
margin: 0 auto;
}
but now it obviously also makes it 70% width on mobile which looks bad: SC2
I did try using media queries, the one with max-device-width specified by itself and also the ones that are on the bootstrap website under the CSS section, everytime I used any of those I removed the original #wrap css code, but nothing at all worked, my website would just go to being 100% on all devices and even if I made it 70% on mobile (just as a test) it was still the same everywhere, like there was no css code for the wrap id at all.
Sorry if it's a dumb question, i'm just lost and really want to make my site 100% at a certain (tablet-mobile) breakpoint.
Try this:-
#media (min-width: 768px) {
.mymenu {
width: 20%;
}
}
Related
So I was working on a static website that uses only HTML and CSS. I made the website in desktop view so when screen size is more than 1220px the website will look exactly as I want it to. For selecting services I have a picture as a background and some text inside it. The dimension of picture is 420x469 px. I have a total of 4 pictures and I put them in pairs of 2. So like this (Service 1) (Service 2). I have padding of 7.8% on both left and right side and 8% padding on bottom. Currently if someone access my website from mobile, then service 1 shows with 7.8% left side padding and half cut picture. Then service 2 below it just like Service 1.
What I want is that when someone uses website from phone, they see the picture completely and no padding. and if there is enough space, then some padding pls tell how i can do that
Have a look at these Docs here:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Then you can use CSS like this
.my-class {
/* Mobile - Desktop */
padding: 10px;
}
#media only screen and (min-width: 600px) {
/* Tablet - Desktop */
/* It will overwrite the other less specific classes padding */
.my-class {
padding: 30px;
}
}
<div class="my-class">
<h1>My Content</h1>
</div>
Bonus tip: Don't work with max-width in general, but with min-width. That means you will be working mobile first.
in css add this line it will work perfectly in any screen size
.service1{
width: 100%;
height: auto;
}
Define a #media query specifically for 'phones' like this :
#media (max-width: 640px) { /*...*/ }
You may want to remove the padding/margin for any smaller screen sizes. Try like this:
#media (max-width: 978px) {
.container {
padding:0;
margin:0;
}
}
Otherwise, Try using bootstrap it works very well in Adjusting margin/padding with screen size.
I am using a full-width template from the Sela theme (https://wordpress.org/themes/sela/). I would like to increase the width of the full-width template on one specific page to the same length as the navigation bar.
http://www.somarunners.com/routes/
That is the page I would like to modify.
Using information on the web, I added the following to my css:
.page-template-full-width-page .content-wrapper.full-width.without-featured-image {
margin: 0;
}
But that did not have the intended effect.
If anyone has suggestions as to how to modify to width of the template, I would appreciate it.
you have media queries affecting your page template
#media screen and (min-width: 1180px)
.site {
margin: 0 auto;
max-width: 1180px;
padding: 0;
}
A simple change in max-width will allow the changes you want made
#media screen and (min-width: 1180px)
.site {
max-width: 100%;
}
I would suggest
A) creating a custom page template and setting .site to 100% from there if it is just the one page you need changing.
Also bear in mind that changing the max-width to 100% inside the media queries may not work on larger screens.
So, i'm a beginner html/css coder and trying to make a simple site.
Now I have a neat background that behaves perfectly.
But when adding a logo at the top center it looks perfect on the current window size. But when I resize the window, half of the logo is cut off.
My CSS style:
.header-logo {
background: url(images/header-logo.png);
position: relative;
height: 200px;
margin-left:auto;
margin-right:auto;
background-size:cover;
width: 971px;
z-index: 2;
}
I suppose there is an auto scale css/js setting for that but i'm not lucky enough to find it.
All help is appreciated!
Louis
The issue is these two lines of code:
height: 200px;
width:971px;
When you use "px" it's a fixed amount of pixels which means it doesn't change based on screen size. If you use "em" instead then the image will change based on the screen size of the visitor.
Here are two quick references that I hope may be helpful.
http://www.w3schools.com/cssref/css_units.asp
http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
To fix it you might do something like this:
height: 100em;
width:486em;
(Don't use my exact values of course.)
EDIT:
Alternatively it may be good to use a percentage like this:
width: 971px;
max-width:100%
EDIT 2:
It was pointed out to me that you'd probably want to include this line as well:
height:auto;
It happens because your width is setted to be fixed on 971px, you should use width: 100% and set max-width or at least use #media to set your logo width.
using #media:
#media screen and (min-width: 480px) {
.header-logo{
width: 250px;
background-position: center;
}
}
It seems like you want a 971px wide logo and you have an issue when the screen size is less than that because the logo gets cut off.
What you need is a media query like this one and place it at the end of you css
#media (max-width: 971px) {
.header-logo {
width: 100%;
}
}
That way any screen size under 971px will change the width property to 100% of screen size.
You don't need to redeclare all the properties of the class in the media query, it will just change the ones that have to adapt to the new screen size.
Read more on media queries here : https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Below i have written some css to ensure my "sections" use up the whole screen when navigated to, however when the browser window is made smaller or accessed on mobile the content is lost as it does not fit.
I have made a media query to counter the first bit of css but I'm not sure what to set it as to counter it.
#media screen and (max-width: 550px){
section.full {height: auto;}
section.contactfull {height: auto; margin-top:0%;}
}
section.full {height: 100vh;}
section.contactfull {
height: 70vh;
margin-top: 10%;
}
I think you will have to leave things flow down. No matter what device people use, you can restrict only one of the 2 dimensions, but not both of them.
Just adjust things horizontally and let them flow vertically.
If you want the section to take up the whole screen, you can use the following:
section {
display: fixed;
width:100%;
height:100%;
}
I think the reason vh is failing you is because at a smaller resolution, the horizontal scroll bar shows up on your page, and vh doesn't take it into account.
I have an responsive html email design which I did using this tutorial from campaign monitor but I have one problem my image is not fitting to the device when it is viewed on mobile,after designing many templates and reading a lot on email designing blogs I learned that gmail by default remove css or styling in the head part and allows only inline html .So now in my case I want my image to fit the device width but its not fitting when I am sending in mail but I can see on browser because of below coded media query .
#media screen and (max-width: 480px) and (min-width:300px) {
.col185{max-width:100% !important;}
.col180{max-width: 100% !important;}
.col180 img{
height: 155px;
}
}
. So what is there any way where in i can see image stretched on my mobile device also. This is my js fiddle link .
Let's say that the name of the div that contains the image is pic You should do this
CSS
.pic img{
width:100%;
height:100%;
}
This will allow the image to re-size itself according to the parent div. If you still don't understand this method let me know and i'll expand on it
You need to change to width or min-width, and right now you have max-width. See below:
#media screen and (max-width: 480px) and (min-width:300px) {
.col185{min-width:100% !important;}
.col180{min-width: 100% !important;}
.col180 img{
height: auto;
}
}
Otherwise, you're just saying to use height: 155px and width will adjust to that height.
Also, remember that not all mail clients render your CSS the same. Many of them, specially Outlook, won't accept many of your CSS rules. Just to be sure, you can run your code through http://premailer.dialect.ca/ (free) or similar so you can pre-check what will happen with your mail