003-home page-background image with text

HTML & CSS
49

This is what it looks like if I use Developer Tools to untick margin 4.5rem 28% 3rem for the <p> element.

rwstone1

I have used my SVG code from the CodePen in post #40 to restore the white circle. I found it was not necessary to untick display: flex for the containing <div>.

Surely the phone number is very important. I don’t see why you would want to hide it on smaller screens. The width of my SVG (with white circle) and the text is 231.8 pixels so will easily fit within the width of the smallest smartphone.

I suggest you reduce the max-width of the text “Through landscaping and interlocking . . . . .”, but that is purely an aesthetic consideration. I suggest no wider than the text above it.

(I’m using Firefox)

2 Likes
50

Sorry I looked at your page and it was on top so I thought that was what you wanted. In the latest code I gave you just change the column direction to row for .home .phone > a.

e.g.


.home .phone svg {
    position: static;
    width: 50px;
    fill: #36b759;
    background:white;
    padding: 8px;
   border-radius:50%;
}
.phone a:before{
display:none;
}
.home .phone > a {
flex-direction:row;
}

.figure-text .phone p{
margin:5vh auto 5vh;
}

Then it will look like this:

test.prygara.com_
test.prygara.com_1104×568 79.9 KB

1 Like
51

I see the SVG code curently includes a white circle but, because of the viewbox values, it ends up being only 7.8 x 7.8 pixels (approximately!) and is covered by the green telephone handset:

rwstone2

1 Like
53

I did. I also removed (commented out) <circle cx="50" cy="50" r="50" /> from HTML as we put white background on svg

I wasn’t sure if I need to add the following rule as the current code works without it

.phone a:before{
display:none;
}

I think I still need to tweak it somewhere as I am getting smaller box for phone icon and number in safari iphone landscape view

iphone-safari-squeezed-phone-box-in-landscape-view

Please take a look at updated test link in post#1 when you get a chance.

54

In Safari I see you are still getting an unnecessary hyphenation wrap in the phone number.

In Developer Tools you can try the following:

  • Untick (“uncheck”) display: flex; in the .home .phone CSS rule;
  • Untick margin: 4.5rem 20% 3rem; in the .figure-text p CSS rule;
  • Untick margin: 1vh auto 1vh; in the .figure-text .phone p CSS rule.

I do not have Safari to check, but I think that will sort things out.

1 Like
55

Problem is I don’t get this hyphenation wrap when I check in mobile view via Chrome or even in Firefox - it has iPhone 11 mobile view available. Those things you suggested how can I check if it works in Safari? May be use media query for the changes you suggested and then check in Safari via my phone…:thinking: ?

56

I suggest you delete those three CSS declarations from your code, upload to your server and then check with your phone. Make a note of where you have deleted the declarations in case you wish to put them back.

I think part of the problem is that you have a flex container within another flex container: both with row direction. The inner <a> flex container will shrink its width by default because it is a flex item descendant of the outer <div> flex container. By deleting display:flex; for the outer container, it becomes a full-width block element. The auto left and right margins on the phone number then push the SVG over to the left. If you delete the 1vh auto 1vh; margin, the 20% then pushes the SVG over towards the left. Insted of deleting the two margin declarations you can change auto to 0. The top and bottom margins will then not be affected.

2 Likes
57

As Mentioned by @Archibald that should have been removed long ago :). It’s not a viable method for responsive design and was changed in every example I gave :wink:

2 Likes
58

If I put max-width within .figure-text p it affects this rule

.headline {
    background: rgba(25, 26, 23, 0.3);
    padding: 2.5rem 0;
}

also reducing background width which I would like not to be affected…

59

Deleting margin: 4.5rem 20% 3rem; affects the text “Through landscaping . . .” as well as the phone number. If you delete 4.5rem 20% 3rem; with the aim of avoiding the phone number wrapping on Safari, then the text “Through landscaping . . .” becomes full width.

To select only the text “Through landscaping . . . .” without creating an extra class or adding an ID to the <p> element, you could use .headline > p

So for PC monitors you could use:
.headline > p {max-width: 1040px;}

Paul will not like the magic number 1040px which corresponds approximately to the width of “R&W Stone has over 20 years of experience” on a PC monitor but I see little alternative if we want to prevent *Through landscaping . . ." being wider than the text above.

1 Like