Rooster
|
Hey everyone
I a, working on a website, classicrealestateschool.com. My issue is, when I created the website, I was only supposed to have one logo on the header. Now, they want 2. I just copied the code from the logo on the left, and pasted it in my main template file and got the logo to show up on the right. The problem is, on tablets and screens with a resolution less than 1280x800, the logo on the right gets cut off. Does anyone have any ideas on how to fix this?
Here, you can see how it looks on different screen resolutions
http://dfcb.github.io/Responsivator/?site=www.classicrealestateschool.com
I'm not worried about the phone screens, because I am in the process of making a mobile site. Just more worried about the 1024x768 resolution size.
Thanks everyone
Rooster
|
| |
Rooster
|
Also, I made the template in artisteer 4, for joomla 2.5
Thanks
|
| |
jrgweb
|
@Rooster - Try adding this to your template.responsive.css around line 83
.art-object554105347 {
background-size: contain !important;}
.art-object1313 {
background-size: contain !important;
margin-left: -90px;
position: absolute !important;}
So the media query should look like this:
@media all and (max-width: 1024px)
{
#art-resp, #art-resp-t { display: block; }
#art-resp-m { display: none; }
.art-object554105347 {
background-size: contain !important;}
.art-object1313 {
background-size: contain !important;
margin-left: -90px;
position: absolute !important;}
}
Make sure the media query is set to 1024px so that it includes 768, 800 and 1024 pixels.
Additional tweaks may be required.
This should be the outcome!
|
| |
Rooster
|
You're awesome! Thanks!
I will try it when I get home, and I'll let you know.
|
| |
Rooster
|
thanks for your help!
It solved my problem, almost 100%.
now, the ONLY screen resolution that it cuts off on the right is 1024x768. I played with the margin-left but it didnt seem to change it.
if you look back at the first link, you will see what I mean. (again, i am not worried about the smaller screen sizes like mobile device sizes).
thank you!
|
| |
jrgweb
|
@Rooster - Then change the tablet media query to 1168px
@media all and (max-width: 1024px) ---->>> Change to 1152px
{
#art-resp, #art-resp-t { display: block; }
#art-resp-m { display: none; }
.art-object554105347 {
background-size: contain !important;}
.art-object1313 {
background-size: contain !important;
margin-left: -90px;
position: absolute !important;}
}
|
| |
Rooster
|
You are the man!
I really appreciate all of your help. That did the trick perfectly.
|
| |
jrgwqeb
|
@Rooster - I know you said you didn't care about smaller screen sizes but with a few modifications you can stack the logo's if the client still wants both for mobile phones.
|
| |
Rooster
|
Quote jrgwqeb:
@Rooster - I know you said you didn't care about smaller screen sizes but with a few modifications you can stack the logo's if the client still wants both for mobile phones.
Sorry for the late reply. I am actually working on a mobile site for them. They don't like how it looks when the main page is loaded on mobile devices.
I am trying to figure out how I can edit the code to where if the screen size is less than 480x800, it will automatically load the mobile version. But I'm not sure that I know how.
If you know how I can do that, that would be awesome!
Also...now out of pure curiosity...what did you change to do fix the logos?
|
| |
Rooster
|
Or I could even make them deal with them deal with the layout if I could get the menu to change to a mobile style slide out menu...like I have on
Classicrealestateschool.com/mobile
|
| |
jrgweb
|
@Rooster - Well there is a number of ways to detect a mobile site.
http://detectmobilebrowsers.com/
I've used the script below in the early days of mobile but now rely on media queries.
<script type="text/javascript">
<!--
if (screen.width <= 800) {
document.location = "classicrealestateschool.com/mobile";
}
//-->
</script>
|
| |
rooster
|
Thanks for that!
Should I research media queries a little more? Or should I use the mobile detection script that you provided?
I wish I could think of a way to replace just the menu when on a mobile device.
I considered editing the mobile site to use php includes, so I wouldn't have to edit my menu on every mobile site when something changes. Then I thought about it and I don't think my mobile menu will work with php includes, because it won't push the page like it does on my current mobile site (if that makes any sense).
|
| |
jrgweb
|
@Rooster -
Quote :Should I research media queries a little more? Or should I use the mobile detection script that you provided?
That's a hard question to answer. That's entirely up to you! No matter what method is used there are always pro's and con's. I like media queries so this is my method of choice.
As you can see I have modified your responsive template with media queries and CSS.
Quote :I wish I could think of a way to replace just the menu when on a mobile device.
As you can see in the image I've modified the maximenuck css to maintain the horizontal menu. This is fine unless you plan to add additional menu items. Since you are using maximenuck, the developer does have a mobile menu plugin for maximenuck. http://www.joomlack.fr/en/joomla-extension-maximenu/maximenu-mobile-plugin
That said, you can also incorporate the slider menu into your template that you mention above.
I've not looked at it yet but most developer allow this and some have instructions on installation.
The code I changed to make the above image.
maximenuresponsive.css
div.maximenuck li {width: auto;}
template.responsive.css
320x480
.art-objec1313 {position: static !important; margin-left: 15px;}
.art-object554105347 {width: 321px !important;}
480x320
.art-object1313 {margin-left: 100px; position:static !important; margin-top:20px; }
.art-object554105347 {margin-left: 10px; }
480x800
.art-object1313 {position: static !important; margin-left: 100px; margin-top: 20px; }
.art-object554105347 {margin-left: 10px; }
Your thoughts?
|
| |
Rooster
|
I like it a lot. But I have to add 2 more menu items 
But I am still going to implement your CSS until I can get 100% done with the desktop layout. Then I will try the mobile.
Also, just curious but do you know a way to display a different featured article when a mobile site is loaded?
|
| |
jrgweb
|
@Rooster - Actually yes. This code will open whatever document you wish.
<script type="text/javascript">
var screenSize=document.documentElement.clientWidth;
if(screenSize<480){
window.location="contact.html"
}
</script>
An example of this is here:
When surfed by mobile phone the contact page will open by default.
http://demo.artisteertoday.com/menu_ani/
|
| |
Rooster
|
that is awesome :) thank you
I may update this thread with another question in a few days.
thank you again for all of your help!
|
| |