How do I move a text closer to the left while leaving a space between ?

Question

1.00/5 (2 votes)

See more:

CSS

HTML

I am trying to create a design like my first image below

Original:
<a href="https://photos.app.goo.gl/cbQgppXfMkUhmBZB7"></a>

Link to image:

however, I got the second image below as my result

Original:
<a href="https://photos.app.goo.gl/JY6boQMCzeRXeMbL9"></a>

Link to image

my result is almost the same as my design but I can't seem to move my text a bit closer to the left while leaving some space between the text and image. How do I fix this? if you want to view my fullcode, it is on codepen :

Original:
<a href="https://codepen.io/Samuel-Christian-the-looper/pen/poXeQmX"></a>

Link to code

Please tell me the proper CSS attribute to move it closer to the left

What I have tried:

I have used the padding-right and margin-right property to move the text closer to the left from the right but it has not worked

Posted 18-Aug-24 18:03pm

schmueller

Updated 18-Aug-24 21:52pm

Pete O'Hanlon

v3

Add a Solution

Comments

OriginalGriff 19-Aug-24 0:34am

There is probably something secret hidden in your secret code or you secret attempts to change d=said secret code that we can't see for security reasons.
And posting links no-one can see doesn't help either.

Posting links instead of working sample code so we would have to wade through the whole project to try and work out what part of it might be relevant isn't likely to make you any friends either - create a minimal working example of the code that shows the problem and post that code rather than linking to entire projects. Happy volunteers help you more than annoyed ones ...

I'll edit your post and make the links visible ...

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Pete O'Hanlon · Accepted Answer · 2024-08-18T22:20:00

Solution 1

Your code doesn't show the images because you are referring to your C drive. What you should look at here is setting the position of the text to absolute in your CSS, and use relative positioning from there. Because I can't see your underlying images, I can't position them appropriately, but you should start with something like the following and play around with your margins or padding as appropriate.

CSS

.about-us-text {
  position:absolute;
  text-align: left;
  box-sizing: border-box;
  align-self: start;
  padding-left:460px;
  padding-top: 0%;
  padding-right: 25px;
 }

Posted 18-Aug-24 22:20pm

Pete O'Hanlon

Comments

schmueller 20-Aug-24 22:19pm

i applied your answer but it has not worked well. The image is now center-aligned on my screen while I want it to be center-aligned within its own container that takes up half of the screen on the left like my design, how do I do this?

Pete O'Hanlon 21-Aug-24 3:24am

For a start, update your code sample so that it actually displays the images. You can't use local file paths because we can't see the images. When you have done that (i.e. showed the images on the online example), come back and let me know. I'll take a look then.

schmueller 22-Aug-24 21:37pm

hi Pete, sorry about that. I am new to programming. do you mean adding images to my codepen? how do I add images on code project or code pen? Also I am looking for an experienced programmer to help me code my website, would you be interested? if you are how can I best contact you and share my work for you to edit and design?

Pete O'Hanlon 23-Aug-24 3:07am

Post your base images (without the text) on a picture sharing site and put the image link in your code pen. Unfortunately, I'm not looking for work.