I made all 3 images mentioned in the previous post same width and height 1254 x 836 which appears to be aspect ratio of 3 : 2. The gap disappeared 
1 Like
I added svg icon for hamburger menu as in the above tutorial (post # 16) but it is not rendered. Please see below
Please see updated test link in post # 1
Add:
background-size: 100%;
background-color: white;
2 Likes
It appears I was able to set up navigation using the tutorial suggested in post #16. Please see updated test link in post # 1.
I have 2 questions:
-
How do I change hamburger lines color ? Say what if I wanted to have lines in green on white or transparent background. Do I need to change some code within svg icon?
-
I know that mostly only developers resize browser windows but what if a user has only one monitor wants to have 2 browser windows open (I guess this can be a scenario when browser window would be resized). Currenty when I try to resize the window, it appears when it hits this rule
@media (max-width: 35rem) {
.site-header .menu { //ul
....
transform: translateX(100%);
transition: transform 350ms ease-out;
}
mobile nav quickly slides out and then disappears again. I was able to google this solution https://css-tricks.com/stop-animations-during-window-resizing/ . I was wondering if there’s some alternate ways to fix it.
You can’t change the white lines as they are part of the actual image. When you use an svg as an image you can’t change it with css.
If instead of referencing the svg using an image tag you embedded the actual svg code in the menu then you can change the stroke color with css as required. It will be a little fiddly as you will need to hide and show the images as you are using 2 images. One for the bars and one for the cross.
Or alternatively just add the three lines with some css pseudo elements inside that button. here’s a very old demo that shows the method.
I see that as a user aid rather than a distraction as users don’t like things just disappearing. The slide out gives you a visual clue that the menu has moved to the side.
However if you do want to stop it you should be able to use this trick.
@media (max-width: 35rem) {
.site-header .menu{
animation:close .01s;
}
@keyframes close {
100%{transform:translateX(100%)}
}
}
(That will need testing to make sure I haven’t missed something.)
1 Like
I did. Works for me. It looks like this option is easier and quicker than fiddling with svg. Thanks for the demo Paul.
1 Like
Tested in MS Edge, Chrome, Firefox, Opera - works for me in all browsers except Firefox.
1 Like
I opened test link in iPhone 11 Safari. There’s a scrollbar at the bottom and when mobile menu is open, the “X” icon is scrolling horizontally as well…can’t figure out where the layout breaks…
You made the cardinal mistake of hiding the overflow on the body which means that any elements that don’t fit will not obviously show a scroll bar but will hold the content wider than the viewport.
A major point in debugging is to hold the screen wide on your desktop and then close it slowly down to 320px width. If at any point you see a horizontal scrollbar on the viewport that tells you that the content is too wide and needs to be adjusted. Just hiding the overflow does nothing good in these cases. You need to make sure all your normal content fits without. overflowing. No need to test on devices initially as you can check all widths on your desktop.
Remove the overflow hidden from the body then address the following issues:
The footer colopon menu is set at 50rem width which is wider than anything below about 500px and will break all devices.
The cards are set at a width of 500px which means no devices smaller than 500px will be able to see them properly.
The menu in the footer does not wrap so will be too wide for content at about 375px.
Here are the fixes I would do:
body{
overflow:auto;
}
#secondary-menu{
width:100%;
max-width:50rem;
}
@media screen and (max-width:375px){
#secondary-menu{font-size:1.2rem;}
}
.card .content{
width:100%;
max-width:500px;
}
1 Like
I think it was in that video tutorial that I tried to follow and I didn’t think it would impact the page layout the way it did. The demonstration page in that tutorial I think has no contact at all except menu. Thanks for catching this Paul.
1 Like
Sorry for the mistype…intended to put it as
The demonstration page in that tutorial I think has no content…
I am getting this in Chrome mobile landscape view. The green phone icon gets shifted a bit, it should be centered within white cirlce (see red arrows).
…and this is how it is rendered in Safari mobile landscape view. There seem to be more white space between the word “Stone” and the green border below than “RW” above
it appears something in the following rules that affect the display of svg icon and phone number is not working in Safari. First I was thinking if inline-flex was a good candidate for this set up… 
.home .phone > a {
max-width: 35rem;
width: 100%;
position: relative;
display: inline-flex;
justify-content: space-between;
align-items: center;
color: #ffffff;
font-size: 4.5rem;
font-weight: bold;
text-decoration: none;
}
.home .phone svg {
position: absolute;
top: 16px;
left: 12.7px;
width: 20px;
fill: #36b759;
}
@media (max-width: 950px) {
.home .phone > a {
font-size: 3rem;
width: 100%;
max-width: 25rem;
}
}
I suggest you incorporate the circle into the SVG as demonstrated here:
1 Like
The text has wrapped because you have used a magic number here:
.site-title {
max-width: 25rem;
margin: 1.5rem auto;
}
Remove the max-width because that is not enough room to display the different font in some browsers and so it wraps.
The different gap to the top line is because Safari is using a different font to other browsers and thus your top and bottom offsets are not the same as other browsers. Use the same font for all browsers on your heading and not a stack choice and then your lines will be more consistent when you place them.
1 Like