So here’s a screenshot of what my blog currently looks like. I’m liking it, but I feel that it needs improvement. Been reading into how to make your blog mobile friendly, and they mention using media queries, which I have, but I haven’t been able to get it to work.
Media queries is not necessary as long as hard-coded widths are not used. Use EM or percentage to set widths.
<!doctype html><html lang="en-gb">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height, initial-scale=1">
<link rel="stylesheet" media="screen" href="screen.css">
<title> home Page </title>
<style>
p {margin: 0 auto 1em;}
div {
width: 88%; max-width: 42em;
margin: 1em auto;
border: dotted 3px RED;
background-color: f5f5f5; color: BLUE;
}
.tac {text-align: center;}
</style>
</head>
<body>
<h1> Google Mobile Friendly Test for responsive web page </h1>
<div>
<p>
This web page is Google Mobile Friendly and can be tested with the following link:
</p>
<p class="tac">
<a href="https://search.google.com/test/mobile-friendly">
Googe Mobile Friendly Test
</a>
</p>
<p>
This web page can be tested on your desktop and does not require to be online.
</p>
<p>
Copy and paste the source code of this page, click above link, select <Code> and paste into the text box.
</p>
</div>
</body>
</html>
1 Like
If you need help with something specific, then you need to post the full, relevant code (or a link to the live site) so that we can see what’s happening.
It’s hard to tell from your post what it is you want help with, as there is no actual question there …
5 Likes
What I do is take the mobile design first approach (smartphones) and using grids/flex using media queries. I would highly recommend that approach as grids basically overide the mobile design with a few modifcations to the padding / margins (if any).
Here’s just a small example in what I’m talking about and another benefit is you can rearrange the layout of other resolutions very easily.
/* Approximately the size of an iPad 768px */
@supports (grid-area: auto) {
@media screen and (min-width: 48em) {
.site {
display: grid;
grid-template-columns: 1fr minmax(14.40em, 33.60em);
grid-template-areas:
"header header"
"sidebar nav"
"sidebar main"
"footer footer";
justify-content: center;
}
.masthead {
grid-area: header;
display: block;
background-image: url(../images/img-header-001-1024.jpg);
}
.nav {
grid-area: nav;
}
2 Likes
@Pepster64 ok cool, so what part of that code says that it’s a mobile first approach? I’d like to do that.
“Mobile first” just means that you design the site initially for small screens, and use media queries to adapt the design to larger sizes of screen, rather than working down from large to small.
As you already have an existing desktop design which you are adapting, it seems more sensible (IMHO) to continue with that and explore why your media queries are not working than to start again from scratch.
However, either approach is valid and it’s entirely up to you. Just don’t try and mix the two.
more sensible (IMHO) to continue with that and explore why your media queries are not working than to start again from scratch.
I certainly don’t want to start from scratch again, as I am very happy with this new layout. I’m just trying to figure out how to make it look as great on mobile. Here’s a better screen shot btw. Didn’t mean to send that first one.
Again, we really can’t tell anything from a screen shot.
What do you want to look differently to the way that it does now? What is the problem you need help solving?
2 Likes
Well for one thing, my footer will not stretch to the same width as my columns. I have been playing around with it and the columns CSS to no avail :
.main-footer {/*new changes */
max-width:81.25em;
width:76.2em;
border: 0px solid lime;
background: black;
box-shadow: none;
margin: auto;
margin-top:4px;
padding: 60px;
}
.columns {
display: flex;
}
.column {
padding: 10px;
background: rgba(0, 0, 0, 0.3);
border: 1px solid black;
}
.main-column {
flex: 1 0 0;
margin: 0 10px;
padding: 10rem 5%;
background: rgba(0, 0, 0, 0.7);
background-image: url(https://i.ibb.co/zXH2TcZ/564-5644617-cherry-blossom-flower-petal-cherry-blossom-flower-transparent.png),
url(https://i.ibb.co/gvQBnrH/cherry-blossom-flower-petal-transparent-flipped3.png);
background-repeat: no-repeat;
background-size: 254px 235px;
background-position: top left, 0px 75px;
font-size: 1rem;
font-family: Open Sans, Georgia Pro, Lucida Sans, Verdana;
color: #fff;
box-shadow: 0px 7px 15px 5px rgba(33, 16, 41, 1);
}
On mobile it looks very different, as you saw in the first screen shot I shared. When I do get the footer to stretch to the same width, the right side of the columns changes. It’s like they’re connected together or something…
The main wrapper is 1280px wide so I don’t see anything in your main-footer code that matches that?
Also:
max-width:81.25em;
width:76.2em;
You can’t have max-width and width using the same units (px) because all you will get is the smaller of the 2. If width is smaller then that’s what the width will be. If max-width is smaller then that’s what the max-width (and consequently the width) will be. One of them is superfluous. None of them match 1280px anyway.
2 Likes
You said you wanted the footer to match the columns above and you have a wrapper on the columns above set to 1280px.So 1280px is the match.
You can use em if you want but you will need the wrapper in ems also at the same size otherwise they won’t match.
2 Likes
So this then :
.main-footer {/*new changes */
max-width:1280px;
width:1280px;
}
You don’t need both max-width and width. Remove the width if you want it to match the wrapper. Having a fixed width will prevent the footer getting smaller at narrower screen sizes.
2 Likes
Width removed. Now having a bigger gap at the right side on mobile.
Are you referring to the 10px padding you have set on body?
If that’s not the problem, then you will need to post your new code - all relevant HTML and CSS.
@TechnoBear , I’m referring to what you said earlier…
You don’t need both
max-widthandwidth. Remove thewidthif you want it to match the wrapper.
So I did that, but a gap still remains on mobile view.
And I’m asking you whether the gap you are referring to is the one created by the
body {padding: 10px;} rule. If you use dev tool to remove that rule, the gap I see goes away.
If I’m looking at the wrong thing, then you will need to explain the issue more clearly.
1 Like
body {padding: 10px;} rule.
Ok I will try removing that.