How do I maintain site layout when browser size is adjusted?
Moderator: General Support Moderators
Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
-
- Joomla! Apprentice
- Posts: 6
- Joined: Tue Jun 19, 2012 6:15 am
How do I maintain site layout when browser size is adjusted?
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?
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
- Joomla! Hero
- Posts: 2755
- Joined: Wed Apr 04, 2007 8:54 pm
- Location: Driggs, Idaho
Re: How do I maintain site layout when browser size is adjus
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
Joomla Website Design / CS-Cart Website Design
http://writenowdesign.com
http://writenowdesign.com
-
- Joomla! Apprentice
- Posts: 6
- Joined: Tue Jun 19, 2012 6:15 am
Re: How do I maintain site layout when browser size is adjus
I am a beginner; Would it be the personal.css file?pxforti wrote: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
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
- Joomla! Hero
- Posts: 2755
- Joined: Wed Apr 04, 2007 8:54 pm
- Location: Driggs, Idaho
Re: How do I maintain site layout when browser size is adjus
you can use firebug with firefox to find the correct location.
The rule is: width: 960px;
The rule is: width: 960px;
Joomla Website Design / CS-Cart Website Design
http://writenowdesign.com
http://writenowdesign.com
-
- Joomla! Apprentice
- Posts: 6
- Joined: Tue Jun 19, 2012 6:15 am
Re: How do I maintain site layout when browser size is adjus
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.pxforti wrote:you can use firebug with firefox to find the correct location.
The rule is: width: 960px;
I will keep searching for a solution.
Thanks again for your help.
-
- Joomla! Hero
- Posts: 2268
- Joined: Sat Feb 09, 2008 8:27 am
- Location: California, USA
Re: How do I maintain site layout when browser size is adjus
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:
Add min-width: 1050px; like so:
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
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
}
Code: Select all
#all
{
min-wdith: 1050px;
color: #333;
border:solid 0px ;
padding-top:0px;
background:#fff
}
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
-
- Joomla! Apprentice
- Posts: 6
- Joined: Tue Jun 19, 2012 6:15 am
How to correct overlay of page titles within articles?
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?
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
- Joomla! Hero
- Posts: 2755
- Joined: Wed Apr 04, 2007 8:54 pm
- Location: Driggs, Idaho
Re: How do I maintain site layout when browser size is adjus
Looks like heading tag is wider than content column. You'll have to adjust width. Again use firebug to find correct CSS rule
Joomla Website Design / CS-Cart Website Design
http://writenowdesign.com
http://writenowdesign.com
-
- Joomla! Apprentice
- Posts: 6
- Joined: Tue Jun 19, 2012 6:15 am
Re: How to make heading area the same width as the content a
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.pxforti wrote:Looks like heading tag is wider than content column. You'll have to adjust width. Again use firebug to find correct CSS rule
-
- Joomla! Hero
- Posts: 2268
- Joined: Sat Feb 09, 2008 8:27 am
- Location: California, USA
Re: How do I maintain site layout when browser size is adjus
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
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
-
- Joomla! Apprentice
- Posts: 6
- Joined: Tue Jun 19, 2012 6:15 am
Re: How do I maintain site layout when browser size is adjus
Thanks for the tip.Markstein wrote: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