Public Forums 71,145 posts

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#188467

I’m looking for some ideas here:

I realize that this isn’t “normal”, but we want to provide variety to the page layouts we use and as such, I have a number of sites where the logo is to the right side of the header. So my header may have info like this:

Some Image | Some contact Info | Company Logo

This looks fine in full browser mode, but when shrinking down for the responsive mode, I’d like to get the first part to go away completely – no problem here, and then the contact info and the company logo to swap positions, so the logo takes the top spot on the small screen with the contact info below it.

I don’t know how to accomplish this with the responsive modes since it naturally wants to drop the further right things under the further left things. Is there an easy way to get this layout swap to happen in the responsive modes?

I have thought of a few options, but they all have some exception or downside where just reorganizing the order would work perfectly.

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#496826

Right now its difficult to guess the issue and give solution to you. It would be awesome if you can possibly include url of your site and a screenshot and description on that particular screenshot on what you would like to do.

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#496881

An example of a site I’m talking about can be found here: http://stunningladies.com

I haven’t worked on the responsive part of this yet (for example, the logo gets cut off at smaller sizes, which I know how to fix), so things get a little weird when resizing the browser, but this an example of what I’m talking about and wanted to address on this site before I got too far into manipulating things.

The logo is in the upper right, the contact info is to the left of that. I’d like the logo to go to the top and the contact info below (pic on the far left will go away on smaller screens – and will be replaced with a better headshot – this is a placeholder). As it stands, the logo will drop underneath the contact info by default.

I have considered making another module to hold the contact info and turn it (and the current one) on or off depending on which responsive size it’s in. The downside to this method is that then I have two modules with the same information. Of course, in this case, that’s not a big deal since it’s info that won’t likely change – but I’d like to know if there is a better way to handle it than that. For me, part of the purpose in using a responsive site rather than a mobile specific one is that there is no duplication of content to keep up with.

Thoughts?

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[Anonymous Moderator JA DeveloperJoin date: September 2014Posts: 9914Downloads:207Uploads:152 Thanks: 1789 Thanked: 2008 times in 1700 posts]

#497021

Which template are you using on the site ? I have checked the site and could not see any issue as described.

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#497072

Developer: This is the T3_blank template. To see the issue, all you have to do is shrink the site from right to left and you will see the logo (far right of the full site) drops UNDER the contact. I want it to instead have the contact info drop UNDER the logo.

Are you not seeing this?

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#497085

It would be great if you can include url of your site, an illustrated screenshot of what you are trying to achieve, It would help to understand the issue and give you specific answers.

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#497161

Sorry the URL above was I correct. Her is the right one
http://stunningladiesllc.com

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[Ninja Lead Moderator Ninja LeadJoin date: November 2014Posts: 16064Downloads:310Uploads:2864 Thanks: 341 Thanked: 3854 times in 3563 posts]

#497250

<em>@slavelle 378388 wrote:</em><blockquote>Sorry the URL above was I correct. Her is the right one
http://stunningladiesllc.com</blockquote>

I have checked the link on your site and could see that this header.php file was customized.

As header of your site: Some Image | Some contact Info | Company Logo will set the resolution auto to adapt your device when showing on any device. You can use this way to resize the logo break line on tablet/mobile mobile

@media (max-width: 767px) and (min-width: 600px) {
.logo-image a {
background-size: 70%;
}
}

If you want reordering modules you can use css style change it

@media (max-width: 767px) and (min-width: 600px) {
.your_class {
position: absolute;
top: 10px;
}
}

This need some customizations so i think you need hire a developer to help you continue the work.

Regards

[Scott Lavelle Friend Scott LavelleJoin date: November 2010Posts: 266Downloads:16Uploads:5 Thanks: 6 Thanked: 64 times in 27 posts]

#497346

Thanks Ninjalead – but I AM the developer, so I do whatever customizations are needed. I understand how to resize the logo for the responsive sizes and have done so with a few other sites I’ve done lately, but I’ll have to look at the second option.

Scott Lavelle - Technical Resource Solutions, LLC
Certified Joomla Administrator

[Author]

Posts