Jump to content
Sign in to follow this  
travelcafe

Image overlaps image in header on smaller screens

Recommended Posts

travelcafe

Please see: image_overlaps_image_in_header.jpg How do I get the second image to fall neatly under the logo image when the site is viewed on smaller screens? Thanks for any help. To place the image on the right I used Theme Function as follows:

add_action('pagelines_branding_icons_start', 'contact_us');
	
	// function contact us in header
	function contact_us(){
	?>
	
talk-to-an-expert.png
<?php } // end function[/code]

The site is running Pageline Framework 2.1.1 with the Base child theme. Website URL: http://travelcafe.co

Share this post


Link to post
Share on other sites
Rob
Okay, do you have this in your CSS? [code]div.contact {float: right;}[/code]

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
travelcafe
Hi rangelone. I do now, but still get the same problem. I did find I had to use relative positioning to get the graphic in the right place above the menu bar. My div.contact is now: [code]div.contact {float: right; position:relative; bottom:18px; right:3px}[/code]

Share this post


Link to post
Share on other sites
Rob
I'm unsure why this is happening and our developer who handles mobile issues is unavailable today. I will point this out to him for Monday. Apologies for the delay. Did you try it without the position:relative....?

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Andrew
You need to use a [url="http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/"]media query[/url] and a little css directed at mobile devices.. [code]@media only screen and (max-device-width: 480px) { some code directed at your contact image. }[/code]

Share this post


Link to post
Share on other sites
travelcafe
Without positioning the graphic falls too low against the menu bar and search box: [img]http://travelcafe.co/wp-content/uploads/2012/02/without_using_positioning_graphic_falls_too_low.jpg[/img]

Share this post


Link to post
Share on other sites
travelcafe
@arpowers I am sure that is the right direction. But I don't have a clue about where to put it, or the code. Should it be somewhere in the Theme Function that I used to place the image there in the first place?

Share this post


Link to post
Share on other sites
Andrew
Add it in your custom css. the rule will take effect on the browser resolution you specify in 'max-device-width'

Share this post


Link to post
Share on other sites
travelcafe
I tried this in the custom css to get rid of the image completely (for starters) on mobile devices... [code]@media only screen and (max-device-width: 480px) { div.contact {display:none;} }[/code] But alas, no. Could you please provide a little bit more of a clue? Thanks in advance.

Share this post


Link to post
Share on other sites
catrina
I'm not sure how this code needs to be implemented: [code]@media only screen and (max-device-width: 480px) {[/code] You'll need to get rid of the last lonely bracket in the code so that it's just this: [code]div.contact {display:none;}[/code]

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
Rob
When arpowers suggested "some code directed at your contact image." I don't think he meant for you to add a CSS element there as you seem to have. As Catrina points out "div.contact {display:none;}" should be separate from the rest of the string arpowers provided. You're essentially putting one CSS element into another, which never works well. That's why Catrina pointed out you have one curly bracket out of place. I'll flash this to arpowers for his attention.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
gyoery
look at my last post here: http://www.pagelines.com/forum/discussion/comment/99469#Comment_99469 if you want to know how to properly implement 2 seperate stylesheets. You can link them either or, as is in the example, or load one base and a mobile "change.css" if you know what I mean.

Share this post


Link to post
Share on other sites
Danny
@TravelCafe, Do you require further assistance ?

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
travelcafe
Hi Danny, (and thanks gyoery), yes I do need help. Having the header area render properly on a mobile device is something I just cannot figure out. I simply want the two images in the header to stack one above the other, or even have the "contact" image disappear in mobile view. Arpowers said: [code]@media only screen and (max-device-width: 480px) { some code directed at your contact image. }[/code] What does he mean by "some code directed at your contact image." ? Could I please have some help with that, or even another clue? Thanks.

Share this post


Link to post
Share on other sites
Rob
Hi, I must apologize for the confusion this topic is causing. Have you tried our Browser Specific CSS plugin? In that, you can easily use CSS to hide the image containing your phone number OR, potentially, align it based on the browser being used. For example, if someones using a laptop with one of the default browsers, no problem, but if using Android, or iOS, you want that element either hidden or lowered. That plugin helps you control things by essentially setting up a different stylesheet for each browser it detects. Please don't take this as any criticism of your site, but it may be helpful to you as well, to use a different, smaller font for your menus. At present, as you can see, it wraps in the main nav bar. I had the same problem and found that a font change worked perfectly to eliminate the wrapping.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
travelcafe
Hi Rangelone, OK, thanks, I will take a look at the brower specific css plugin. Concerning... [quote]it may be helpful to you as well, to use a different, smaller font for your menus. At present, as you can see, it wraps in the main nav bar.[/quote] No, I don't see that at all, and I've tested in Chrome, IE, and FireFox. This is what I see: [img]http://curators.co.nz/wp-content/uploads/2012/04/travelcafe_view_in_browser.png[/img] Would you please tell me what device, browser, and screen resolution you are using to view the site? Thanks.

Share this post


Link to post
Share on other sites
travelcafe
Where exactly do I find your Browser Specific CSS Plugin? I can't see anything here http://www.pagelines.com/store/plugins/ and don't seem to be able to drill down any further. Thanks.

Share this post


Link to post
Share on other sites
Rob
I'm using Firefox on my laptop which has a pretty high resolution. Here's the screenshot: [img]http://www.epicurus.com/members/wp-content/uploads/2012/04/what-I-see.png[/img] To find the Browser Specific CSS plugin, go to Dashboard > PageLines > Store > Plugins... under the Get New Plugins tab, you'll see a grey bar. One of the options is Top Free. Click that. A list of available plugins will show. Browser Specific CSS is on that list. It's free (as the category suggests). The description reads "Add browser specific classes to the main body tags for all major browsers and devices."

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Rob
By the way, the font I use (because it's normally narrow) is Cuprum * G. You don't need the Google Fonts plugin for it.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×