The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Help with aligning search box
Night Shift
post Jun 10 2024, 11:14 PM
Post #1





Group: Members
Posts: 1
Joined: 10-June 24
Member No.: 29,188



Hi I’m new to css so I thought this was a good place to start. I am helping to build a website for a friend and wanted to change some CSS to move the search box to left aligned instead of centre on this page https://twistedhost.net.au/home-2/

I thought I had it right but I must be missing something, just note sure what?

CODE
.whmpress_domain_search_ajax form {
display: flex;
font-size: 16px;
max-width: 980px;
margin-left: 0px;
margin-right: 0px;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Cassie Bratt
post Jun 18 2024, 12:24 AM
Post #2





Group: Banned
Posts: 2
Joined: 18-June 24
Member No.: 29,194



QUOTE(Night Shift @ Jun 10 2024, 11:14 PM) *

Hi I’m new to css so I thought this was a good place to start. I am helping to build a website for a friend and wanted to change some CSS to move the search box to left aligned instead of centre on this page https://twistedhost.net.au/home-2/

I thought I had it right but I must be missing something, just note sure what?

CODE
.whmpress_domain_search_ajax form {
display: flex;
font-size: 16px;
max-width: 980px;
margin-left: 0px;
margin-right: 0px;
}



Hello,

Thank you for providing the CSS code. Based on what you’ve shared, it looks like you’re using flex to display the form. To align the search box to the left, you can use the justify-content property and set it to flex-start. This will align the flex items (in this case, the search box) to the start of the container.

Here’s how you can modify your CSS:

CODE
.whmpress_domain_search_ajax form {
  display: flex;
  justify-content: flex-start; /* Align items to the left */
  font-size: 16px;
  max-width: 980px;
  margin-left: 0px;
  margin-right: 0px;
}


Try adding justify-content: flex-start; to your .whmpress_domain_search_ajax form CSS rule and see if that moves the search box to the left as desired.

I hope the solution may help you.



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Cassie Bratt
post Jun 18 2024, 11:19 PM
Post #3





Group: Banned
Posts: 2
Joined: 18-June 24
Member No.: 29,194



QUOTE(Cassie Bratt @ Jun 18 2024, 12:24 AM) *

QUOTE(Night Shift @ Jun 10 2024, 11:14 PM) *

Hi I’m new to css so I thought this was a good place to start. I am helping to build a website for a friend and wanted to change some CSS to move the search box to left aligned instead of centre on this page https://twistedhost.net.au/home-2/

I thought I had it right but I must be missing something, just note sure what?

CODE
.whmpress_domain_search_ajax form {
display: flex;
font-size: 16px;
max-width: 980px;
margin-left: 0px;
margin-right: 0px;
}



Hello, MaryKayInTouch

Thank you for providing the CSS code. Based on what you’ve shared, it looks like you’re using flex to display the form. To align the search box to the left, you can use the justify-content property and set it to flex-start. This will align the flex items (in this case, the search box) to the start of the container.

Here’s how you can modify your CSS:

CODE
.whmpress_domain_search_ajax form {
  display: flex;
  justify-content: flex-start; /* Align items to the left */
  font-size: 16px;
  max-width: 980px;
  margin-left: 0px;
  margin-right: 0px;
}


Try adding justify-content: flex-start; to your .whmpress_domain_search_ajax form CSS rule and see if that moves the search box to the left as desired.

I hope the solution may help you.



Hello,

Did you tried this solution? Is it helpful or not? Once try this and let me know.



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
4 User(s) are reading this topic (4 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 25th June 2024 - 03:58 AM