How do I maintain site layout when browser size is adjusted?

[WebBased]

For my website at WebBasedOp.com, when the browser size is adjusted to a smaller size the header logo starts to cut off on the left side while the rest of page adjusts its size and after a certain point the articles start to reposition.

How do I keep the header logo in place and stop the contents from adjusting and instead make the horizontal scroll bar on the browser appear when the screen is made smaller?

[pxforti]

You need to specify a fixed width for the page container div. There is probably a div tag that contains the page. In that, you need to create a css rule to specify a fixed width; eg, 960 px. It's possible that your template has a setting for this. To check, go to Extensions > Template Manager

[WebBased]

You need to specify a fixed width for the page container div. There is probably a div tag that contains the page. In that, you need to create a css rule to specify a fixed width; eg, 960 px. It's possible that your template has a setting for this. To check, go to Extensions > Template Manager

I am a beginner; Would it be the personal.css file?

What will the setting look like?

If it is not there what code would I need to put and where?

It is the beez 20 default template.

Thank you for your help.

[pxforti]

you can use firebug with firefox to find the correct location.

The rule is: width: 960px;

[WebBased]

you can use firebug with firefox to find the correct location.

The rule is: width: 960px;

I downloaded firebug and I set the width, but it just resulted in the logo being smaller and had no effect on not cutting off the logo and stopping the contents from moving out of place when the web browser is made smaller. My problem may be that I'm still unsure of what needs to be changed/added/removed and where.

I will keep searching for a solution.

Thanks again for your help.

[Markstein]

It looks like your site is using a width of 1050px. In order to keep that width when someone re-sizes their browser window, etc. then you can put in a CSS property for "min-width".

Open this file:

http://webbasedop.com/templates/beez_20 ... rsonal.css

Find this code:

Code: Select all

#all
{
  color: #333;
  border:solid 0px ;
  padding-top:0px;
  background:#fff
}

Add min-width: 1050px; like so:

Code: Select all

#all
{
  min-wdith: 1050px;
  color: #333;
  border:solid 0px ;
  padding-top:0px;
  background:#fff
}

Note that if you instead put the piece of code at the bottom of backgbround:#fff then you would need to make sure to put a semicolon after #fff since that property would no longer be the last property in that rule. To clarify further, always make sure there is a semicolon after every property. If it is the last property in the "rule" then it does not need a semicolon but it does not hurt anything if there is one and can avoid the chance of making mistakes if adding code down the road.

ALWAYS make a backup of your file/code before editing it so that you can revert back to the original in case you make a mistake.

Mark

[WebBased]

It worked. I really appreciate that you took the time to give me step by step directions and for the semicolon tip.

I had one more thing (separate issue) I was wondering about. Within two of the three articles posted, when a visitor hits “All Pages”. It creates some sort of overlay over the page titles next to the article and blocks some of the words. It seems to be next to the first page titles. Not sure why only two of them. I have added screenshots of the two articles where this occurs so you can see what I mean. Do you happen to know why this happens?

[pxforti]

Looks like heading tag is wider than content column. You'll have to adjust width. Again use firebug to find correct CSS rule

[WebBased]

Looks like heading tag is wider than content column. You'll have to adjust width. Again use firebug to find correct CSS rule

I see that it says <h3>, but I don’t know what I’m looking for to tell what the current width is of the content area or the heading. Should I be looking for something that says width or margin? From what I can tell it says the width is 0px.

[Markstein]

FYI, before you continue I would recommend you clean up all of the MSWord code in your text. If you view your page source you will see lots of code relating to MSWord such as "MsoNormal, mso-hansi-theme-font, mso-bidi-theme-font, mso-ansi-language...etc".

You should never copy and paste from MSWord directly into your Joomla editor as it will lead to display problems in some browsers. Instead use the editors "Paste as plain text" option or similar or use regular old notepad which will strip all styling then copy from there. Personally, I would take all of the text in your articles, etc. and paste them into Notepad, copy from notepad then paste directly into your Joomla editor and format as desired.

Mark

[WebBased]

FYI, before you continue I would recommend you clean up all of the MSWord code in your text. If you view your page source you will see lots of code relating to MSWord such as "MsoNormal, mso-hansi-theme-font, mso-bidi-theme-font, mso-ansi-language...etc".

You should never copy and paste from MSWord directly into your Joomla editor as it will lead to display problems in some browsers. Instead use the editors "Paste as plain text" option or similar or use regular old notepad which will strip all styling then copy from there. Personally, I would take all of the text in your articles, etc. and paste them into Notepad, copy from notepad then paste directly into your Joomla editor and format as desired.

Mark

Thanks for the tip.