CSS Change width of text section in CSS

I use the "Hair Repair Website Template" for a website I am creating. The webpage under "Services" tab is divided into different sections. I need to remove the section "Services Offered" and in stead make the other text section (with the text "This website template has been designed..." and so on) cover a wider section of the page. I suspect that has to be done in the CSS script but where and how? I would be very greatful for your assistace.

https://freewebsitetemplates.com/preview/hairrepairwebsitetemplate/services

/Anders

 

click on:
"https://freewebsitetemplates.com/preview/hairrepairwebsitetemplate/services"
that takes you to the webpage (from this post)
for firefox, click on the orange "Firefox" tag (top left of page), then click on the arrow
right side of "Firefox" (gives a dropdown menu). Put the mouse over "Web Developer" (gives a
drop down menu). Click on "Page Source". That gives you the source code of the page. Top of
page source code, click on "<link rel="stylesheet" href="css/style.css" type="text/css">"
(gives you the CSS code).
CSS code:
/** Services **/
#contents #services {
width: 940px;
padding-left: 10px;
padding-right: 10px;
}
#services:after {
clear: both;
content: "";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
#services h5 {
float: right;
background: url(../images/border4.png) repeat-x left bottom;
width: 480px;
margin: 0 0 12px;
padding-bottom: 12px;
}
#services #main ul {
padding-top: 7px;
}
-
I believe this is the "Services" that you refer to (menu top of web page)
-
hope this helps
falcon

 

click on:
"https://freewebsitetemplates.com/preview/hairrepairwebsitetemplate/services"
that takes you to the webpage (from this post)
for firefox, click on the orange "Firefox" tag (top left of page), then click on the arrow
right side of "Firefox" (gives a dropdown menu). Put the mouse over "Web Developer" (gives a
drop down menu). Click on "Page Source". That gives you the HTML source code of the page.

In Html code, your images are:
Line:
71 <img src="images/smiling-small.png" alt="Img">
77 <img src="images/sideview.png" alt="Img">
83 <img src="images/shampoo-small.png" alt="Img">
89 <img src="images/eyebrow.png" alt="Img">
96 <img src="images/eye.png" alt="Img">

click on the blue link to view them

 

Thanks for the reply navyfalcon. Problem is when I change from
width: 940px;
to
width: 999px;
all that happens is that the two "columns" gets wider apart. The text in the left "column" does not get wider. Got any ideas?

/Anders

 

Hi Anders,

I'm not sure if this is 100% correct or the most efficient way to do this but here is how I would do it:

I would start off by deleting the full sidebar Div in HTML (on the services page). And I would then start to play around with the css to get the layout sorted!

I have tried this in the browser already and it seemed fine, but I will download the template to make sure this is all ok and I will get back to you shortly

If anyone see's any problems with this approach then please feel free to let me know as I'm still learning

Cheers

The Wanderer

 

Hi Anders,

I think I have it! I have changed a few properties in the css and all seems to be working fine. There were a few issues to begin with but I managed to sort them by adding a few extra lines of css (2 in total I think) to sort this out.

The main problem effecting the wider layout of text on the services page was causing the 'blog page' to become disjointed along with the 'about page' paragraph text. The 2 lines of code seem to have sorted this and I will try and get the css file to you so you can have a peak. If this is not possible I will write what lines of code I changed on here along with the one's I added.

Let me know if this works for you.

Cheers

The Wanderer!

 

I have attached the css file below.

Remember to make a back-up of the current css file you have incase you want to revert back to that layout

 

If your able to edit the css, then you could target the sidebar on the services page using #services #sidebar, and setting the display property to none.

Code:

#services #sidebar {
    display: none;
}

 

On the template under "about us":
This website template has been designed by Free Website Templates for you, for free. You can replace all this text with your own text. You can remove any link to our website from this website template, you're free to use this website template without linking back to us. If you're having problems editing this website template, then don't hesitate to ask for help on the Forums.
- - -
Where does it say you can't edit the text, just use a good HTML Editor or a good text editor.
Access the code under "page source" (see reply #2 for details for firefox - or if you are using a different browser,
inform us and we will give detailed instructions - also what editor you use)