Wonky vs code and codepen

my goal is to hover a div and have it become larger

please see

fine here :slight_smile:

please see


fine here :slight_smile:

HOWEVER in VS Code te hover shifts from left to right :frowning:

yes, i am aware i have a broken image… do not think that matters here…

i wil fix it!

if it works at


am i good to go?

maybe try it at your end?

also at https://forallthetime.com/project12/index.html a scrol bar happens on the bottom… important?

this is my first try at a landing page with a hero section

please reply to everyting :slight_smile:

many thanks!

Not really :slight_smile:
You are making the 100% h3 scale which makes it too big for the page and forces a scrollbar.

Instead scale the span instead of the h3 and get rid of the wasteful div around the h3 also.


.find {
  margin-top: 3rem;
.find span {
  background-color: white;
  color: black;
  border-radius: 100px;
  padding: 2rem;
  transition: all 0.2s ease-in-out;
  display: inline-block;
  cursor: pointer;
.find span:hover {
  transform: scale(1.1);

<h3 class="find"><span class="link"> Find your book now!</span></h3>

Note: It seems weird that you give the span a class of link? If you want a link then use an anchor. If you want an interactive button then use the button element. :slight_smile:

Also in your codepen that side image code makes no sense (even if I ignore the wh typo). Whatever that image is supposed to be will be stretched unless its aspect ratio matches the measurements you gave it.

Also 100vh means the image will start from where it is and then go down another full viewport height creating a vertical scroll when none may be needed. If the image is at the top of the document then that’s ok as 100vh will make it viewport height but if its 2 or 300px from the top the image goes below the fold because 100vh + 300px is taller than the viewport.


follow up


canot get my image to go to https://forallthetime.com/project13/index.html

i tried <img src="https://forallthetime.com/project13/IMAGES/2.jpg" alt="#">

IMAGES did NOT autofill, as it usualy does :frowning:

help here

please clarify

example, please

basically what need i do to make the image work, fullly responsive :slight_smile:


whats the difference?

if i use an anchor, am i good?

Technically its a link, but could also be a button… confused :frowning:

what do i do to prevent the scroll?

get rid of px from the top? how do iachieve the same effect without disturbing the viewport

again, thanks!

An anchor (link) expects a destination in the form of an href. If you click the link then you go somewhere else. That’s the users expectation.

So if you want someone to click that element and go to another page or section then the anchor is the correct element to use.

If on the other hand you want someone to click that element and for example open a modal or submit data back to the server then it needs to be a button. Buttons are for actions.

If you don’t want either of those and it’s just a hover effect then it should be a span or other text html element.

I’m on a mobile at the moment so will answer tomorrow when I’m on the desktop and can see your latest example. :slight_smile:

1 Like

i will use an anchor tag here :slight_smile:


how do i use an anchor tag for a link here?

<div class="find">
            <h3><span class="book-now"> Find your book now!</span></h3>

having trouble with the large image here

i know you had suggestions, but i ask you to explain them

and i still verticaly scroll

basicaly how do i make that image responsive and work flawlessly on any device, and help with the media query too, please :slight_smile:

Same as I gave you above when I used the span. No need for a wrapper div.

I would use it as a background as its not important to the content as the text is explaining everything.

I don’t like the split screen approach but at the least I would merge to one screen for smaller devices with the text on top of the image.

The html is not semantic either as they are not all h3 headings. Even if they were h3 headings that would mean you have h2 and h1 headings above them and you have none. Therefore the first heading should be an h1 and the rest just p tags as they are detailing the heading and not separate sections. Successive headings at the same level would suggest a new section each time so is not semantically correct here.

As a start I would recode the html to this.

<div class="container">
  <header class="intro">
    <h1>OBX Bookstore</h1>
    <p> Find the perfect book to read and enjoy on your stay on the Outer Banks</p>
    <p>OBX Bookstore carries many genres, fiction and non-fiction</p>
    <p class="book-now"><a href="#"> Find your book now!</a></p>
    <!-- main content goes here -->

And then restyle ( as a starting place) to look like this.

As I said this is a starting place with a more semantic and manageable html in place. You can change the look as required with css to what it needs to be.

If you simplify the split 50/50 screen to just an overlay then you can do away with a media query initially and just have the text on top,




yes, i was trying a landing page code

have done some research

i dont want to burden you, or frustrate you… but i ask what you would do to make it aesthetically superior

another codepen is most welcome!!

i like what you did at the beakpoint:)

i like the image behind the text

i want the background image to be brighter, less opacity

i tried in different places in my css to change my opacity, cant make it happen :frowning:

help me out here, please

some new code to me, i will put in the effort to understand what is new to me :slight_smile:

as you know, i am still learning… but i am determined to be a web developer!

i want this to be my job

remember what you said about practice :slight_smile:


i figured the opacity out :slight_smile:

@media screen and (max-width: 800px) {
 .container {
    opacity:0.9 ;


to follow up…

what you would do to make it aesthetically superior?

sorry, got ahead of my self!

the media query is fine, BUT it now makes the full screen background image dark :frowning:

help, please

You can’t do that as opacity is atomic in that it affects everything. In my example I used rgba on the background color to make the background see-through but not the text.

You can’t just have white text on an image because in the area of the background image where there is white the white text will disappear. You need to have the intermediate overlay to allow some contrast… In my example you can reduce the rgba value (the last value at the end) and that will make the background lighter but you must ensure contrast.

I would do it like my last example but with perhaps a couple of text shadows behind the text to make it stand out and a little box shadow. I would also center that middle panel so its vertically and horizontally placed on larger screens.

I’m not a designer as such but as a start something like this.

well done!

good to know!

ok, i get the majority of what you with the CSS here :slight_smile:
something i need your help with is understading

*:after {
  box-sizing: inherit;

what did you do here?

display: flex;
  flex-direction: column;

margin: 0.8rem 1rem;
why use rem here?

font-size: clamp(3rem, 10vw, 4rem);
the first value here is your min-width, the middle your preffered value and the last is max-width. do i have that right? why use rem and vw here?

i do like what you have done here! i like how the main look gets smaller and larger as you adjust the browser… may i ask your method for this?

apologies if you have already explained that :slight_smile: let me know though

where can i find resources on designing a site to make it fancy or pretty to look at? i have done some searching


That’s explained in this following article which I believe I have linked to before.

Rem units are based on the root element and therefore will obey user preferences. If a user has designated their preferred font size is 20px then 1rem will equal 20px. If the user has not specified a preferred size then 1 rem will equal whatever the UA has set as default. This will most likely be 16px but a User Agent could set to something else if they so desired.

If you instead had set a size in px then that overrides a users preferences. It’s not a problem for margins but could be disastrous for font sizes.

By using rem the margin remains consistent with the font size and everything works together.

That was done with clamp adjusting the font size based on the viewport width (vw) and gives a bigger or smaller font size depending on the viewport width.

i will play around with this… see if i can understanding things better :slight_smile:

plesae, what is viewport width?

breifly tell me about viewport widths


should all my sites use clamp as above?

is there a good time to use clamp, a bad time to use clamp?

personal prefrence?

please elaborate

i noticed the only media query was for the.panel background

also, are landing pages always the best thing to do?

is there a good time to use landing pages, a bad time to use landing pages?

please pass on anything else you think i should know :slight_smile:

thank you!

The viewport width is the width of your browser. It will change depending on how wide you open or close the browser.

The vw unit is based on this width so 100vw is the whole width of your browser. It’s similar to percentages except that it’s based on the viewport width and not the contains block’s width as with percentages.

That means if you base a font size on vh the font will be smaller or bigger depending on the viewport width. When used with the clamp property you can set a minimum size and a maximum size so it doesn’t get bigger or smaller but is able to scale between those values.

They are mainly useful for headings as usually your body text should be confined to usable line lengths and a readable text size anyway.

I’m not keen on landing pages. I don’t want to arrive at a site just to find I have to click again to get to the actual site. But maybe that’s just me :slight_smile:

That’s more of a general design question and not html css as such. You probably need to take a design course or just look at various sites and try and copy what you like. :slight_smile:

1 Like

It’s not just you. :slightly_smiling_face: I also strongly dislike sites which make you visit unnecessary pages or click multiple links to reach the content you want. It’s also an accessibility issue. Not everyone finds it easy (or even possible) to move a mouse and click a link.

1 Like

thanks for both you insites!

it does make sense :slight_smile:

i googled how to clone a site, but never looked into it

what do you suggest i do to copy what i like from another site?

copy the HTML and CSS …JS down the line

copywright issues? fair game?

you know me by now :slight_smile:

slow and simple, please

thank you!

No you shouldn’t clone a site. :slight_smile:

I was merely saying look at some sites that you like and then you can imitate their design choices. You would write your own code.

You said you were looking for design ideas so when you see something you like you can build your own version. Never blanket copy other people’s code.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.