website on mobile

jonathanduane2010
jonathanduane2010 used Ask the Experts™
on
Hi Guys,

I cant see my site properly on my tablet or iphone, i wonder is it to do with the size of my background image?

www.thedancingsoul.ie
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®

Commented:
I think that's because your design is not responsive and you do not have a mobile version.
Here's how it looks in my note 2:
capture
You cannot expect the same look on a 19" monitor and on a 4" phone.

HTH,
Dan

Author

Commented:
if it looked like that i would be delighted.....

this is how it looks on my ipad and iphone
photo.PNG

Commented:
Have you checked your site in Safari?
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
yes...and i think so and i remember it being ok, i will double check....
Top Expert 2015

Commented:
Seems to work fine in Safari desktop.

You should look closely at your HTML. Firebug is showing a closing </div> in error (red) just before the closing </header> tag.

Author

Commented:
how can i fix that??
Top Expert 2015

Commented:
Take it out if it doesn't belong.

21 errors on the page according to this:

http://validator.w3.org/check?uri=thedancingsoul.ie&charset=%28detect+automatically%29&doctype=Inline&group=0

Author

Commented:
so do i take it out of here somewhere?

this is in the header.php

<header>
		
		<div id="header-top-container">
			<div id="header-top">
				
				<div id="header-top-left">
					<?php
						wp_nav_menu(array( 'theme_location' => 'my_top_nav', 'depth' => 2, 'fallback_cb' => false, 'menu_class' => 'sf-menu', 'container' => 'false', 'container_class' => ''  ));
					?>
</div><!-- close #header-top-left -->

				
				<?php if(of_get_option('header_icons', 'yes') == 'yes'): ?>
				<div id="header-top-right">
					
					<div class="social-icons">
						<?php if(of_get_option('twitter_id')): ?>
						<a href="<?php echo of_get_option('twitter_id'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/social-icons/twitter.png" alt="" class="transparent" /></a>
						<?php endif; ?>
						<?php if(of_get_option('facebook_link')): ?>
						<a href="<?php echo of_get_option('facebook_link'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/social-icons/facebook.png" alt="" class="transparent" /></a>
						<?php endif; ?>
						<?php if(of_get_option('tumblr_link')): ?>
						<a href="<?php echo of_get_option('tumblr_link'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/social-icons/tumblr.png" alt="" class="transparent" /></a>
						<?php endif; ?>
						<?php if(of_get_option('dribbble_link')): ?>
						<a href="<?php echo of_get_option('dribbble_link'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/social-icons/dribbble.png" alt="" class="transparent" /></a>
						<?php endif; ?>
						<?php if(of_get_option('skype_id')): ?>
						<a href="<?php echo of_get_option('skype_id'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/social-icons/skype.png" alt="" class="transparent" /></a>
						<?php endif; ?>
						<?php if(of_get_option('vimeo_channel')): ?>
						<a href="<?php echo of_get_option('vimeo_channel'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/social-icons/vimeo.png" alt="" class="transparent" /></a>
						<?php endif; ?>
						<?php if(of_get_option('youtube_channel')): ?>
						<a href="<?php echo of_get_option('youtube_channel'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/social-icons/youtube.png" alt="" class="transparent" /></a>
						<?php endif; ?>
						<?php if(of_get_option('email_address')): ?>
						<a href="mailto:<?php echo of_get_option('email_address'); ?>" target="_blank"><img src="<?php bloginfo('template_directory'); ?>/images/social-icons/email.png" alt="" class="transparent" /></a>
						<?php endif; ?>
					</div>
				</div><!-- close #header-top-right -->
				
				<?php endif; ?>
				
				<div class="clearfix"></div>
			</div><!-- close #header-top -->
		</div><!-- close #header-top-container -->
		
		
		
		<div id="header-gradient">
			
			
				
				
				<?php
					if(of_get_option('display_searchbox', 'yes') == 'yes'):
				?>
				
					<div id="header-logo-right">
						<form method="get" class="searchform" action="<?php echo site_url(); ?>">
							<label for="s" class="assistive-text"><?php _e('Search','progressionstudios'); ?></label>
							<input type="text" class="field" name="s" id="s" placeholder="<?php _e('Search','progressionstudios'); ?>" />
							<input type="submit" class="submit" name="submit" id="searchsubmit" value="<?php _e('Search','progressionstudios'); ?>" />
						</form>
						
						
					</div><!-- close #header-logo-right -->
					
				<?php
					elseif(of_get_option('display_searchbox', 'yes') == 'ad'):
				?>
				
					<div id="header-logo-right">

						<div class="advertisement">
							<?php echo of_get_option('header_ad_code'); ?>
						</div>

					</div><!-- close #header-logo-right -->
					
				<?php
					endif;
				?>
			
			<div class="clearfix"></div>
			</div><!-- close #header-logo-container -->
			
			<div id="navigation-<?php echo of_get_option('navigation_style','narrow'); ?>">
				<nav>
					<?php
						wp_nav_menu(array( 'theme_location' => 'my_main_nav', 'depth' => 4, 'fallback_cb' => false, 'menu_class' => 'sf-menu', 'container' => 'false',  'container_class' => ''  ));
					?>
							
					<div class="clearfix"></div>
				</nav>
			</div><!-- close #navigation-narrow -->

		</div><!-- close #header-gradient -->
		
	</header>

Open in new window

Top Expert 2015

Commented:
Take out line 98 since you are closing #navigation-narrow twice.

</div><!-- close #navigation-narrow -->

Go through the list of errors at the link I posted and eliminate as many as possible.

Author

Commented:
ok i have made the background image smaller and its improved it slightly
Top Expert 2015

Commented:
The size of the image could be the problem although I've never encountered that. It's 952 x 6500. Since its such a simple background, I wonder why you couldn't just have a top piece that's maybe 10px tall followed by a filler piece that's 10 px tall and repeats on the Y axis. With css3 you can also put multiple backgrounds on the same container, https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds

Author

Commented:
Ok i can try it as

10px tall followed by a filler piece that's 10 px tall and repeats on the Y axis? what do i need to edit?
Top Expert 2015

Commented:
First you need to create two images. Open the original in an image editing program and crop it to the top 10 pixels. For the second image, take a 10 pixel strip, 10 pixels down from the top.

I'll have to check back in when I get home to figure out how to get it on the page.
Top Expert 2015
Commented:
The tested and confirmed fix.
I took your 952 x 6500 background image and created the two 10 pixel tall images attached.
Added this div just above <div class="content-container"> in the markup:

<div class="page-content-top"></div>

I don't know which php file you need to add that too, could be page.php or if you have a custom template page, it might be there.

I made the following changes (in bold) to wp-content/themes/Primero/style.css:

Around line 163,
.content-container {background:url(images/content-bg-fill.png) top left repeat-y; width:952px; margin:0 auto; }
.page-content-top {height:10px; width:952px; background:url(images/content-bg-top.png) top left no-repeat; margin:0 auto;}

Around line 528,
.sidebar-container {background:url(images/sidebar-container.png) 677px 0 no-repeat; }

Might need a tweak or two more to get everything back as it was.

In my iOS Simulator, my mock up of your page now looks like this.Mock upcontent-bg-fill.png
content-bg-top.png

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial