003-home page-background image with text

[Archibald]

@810311

If possible I would like to keep the look as before - phone icon and phone number placed horizontall

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

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>.

@810311

and then I would probably just hide them with media query on smaller screens.

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)

[PaulOB]

@810311

phone icon and phone number placed horizontally (see post #39 for demo)

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:

[Archibald]

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:

[810311]

@PaulOB

You would need to integrate it into existing styles

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

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

[Archibald]

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.

[810311]

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… ?

[Archibald]

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.

[PaulOB]

margin: 4.5rem 20% 3rem;

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

[810311]

@Archibald

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.

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…

[Archibald]

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.

[810311]

@Archibald

.headline > p {max-width: 1040px;}

It looks like it still affects the background. I just also notice there’s a slight misalignment between phone and get quote - can we shift svg and phone a bit to the left? Please take a look at updated test link in post#1.

[Archibald]

That background comes from the background declaration in .headline CSS rule.

I do not see any misalignment. Your screenshot does not show the full width of the web page. The red vertical line is therefore not central.

[810311]

@Archibald

That background comes from the background declaration in .headline CSS rule.

Yes but .headline > p {max-width: 1040px;} affects the background. I think it should only taget p as direct child of .headline. Also now the whole area occupied by .home .phone > a became clickable of course because we are target a link (anchor element). Can you take a look at https://test.prygara.com/ ?

[810311]

@Archibald

I suggest you delete those three CSS declarations from your code, upload to your server and then check with your phone

I did. I am still getting in Safari iphone landscape view…

[810311]

@PaulOB

Sorry I looked at your page and it was on top so I thought that was what you wanted.

No worries. I understand. Thank you and @Archibald for guiding me on how to write proper CSS - really appreciate it.

[Archibald]

@810311

Yes but .headline > p {max-width: 1040px;} affects the background. I think it should only taget p as direct child of .headline.

If I edit to max-width: 800px for example, the text "Through landscaping . … " becomes narrower as expected. To keep it centred I have added:

margin-left: auto;
margin-right: auto;

[810311]

@Archibald

becomes narrower as expected

thats correct, however, transparent background also becomes narrower. how can we keep transparent background width unchanged - being full width of the page?

[Archibald]

Edit .figure-text CSS rule to become:

.figure-text {
	width: 100%;
	align-self: center;
}

Then to centralise the "Through landscaping . . . " paragraph: for the .headline > p CSS rule insert declaration margin: 0 auto;. You can then adjust top and bottom margins of this paragraph as you wish.

Check how things appear on smaller screens.

[810311]

@Archibald

Check how things appear on smaller screens

when I added .home .phone > a { flex-direction:column; } to @media (max-width: 950px) it squeezes the svg on iphone from round shape to oval…do you know why it might be happenning?

[Archibald]

I am not seeing that with the web page currrently uploaded but I am only simulating an iPhone in Firefox Developer Tools.

Try deleting flex-direction:column; does that avoid the oval SVG?

The <a> element containing SVG and phone number side-by-side is 251.8 pixels wide so can easily fit the screen of a small smartphone. Now we hopefully no longer have the issue with the phone number wrapping, there is no need to have flex-direction: column;.