website on mobile

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
jonathanduane2010Asked:
Who is Participating?
 
Tom BeckConnect With a Mentor 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
0
 
Dan CraciunIT ConsultantCommented:
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
0
 
jonathanduane2010Author Commented:
if it looked like that i would be delighted.....

this is how it looks on my ipad and iphone
photo.PNG
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
Dan CraciunIT ConsultantCommented:
Have you checked your site in Safari?
0
 
jonathanduane2010Author Commented:
yes...and i think so and i remember it being ok, i will double check....
0
 
Tom BeckCommented:
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.
0
 
jonathanduane2010Author Commented:
how can i fix that??
0
 
Tom BeckCommented:
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
0
 
jonathanduane2010Author 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

0
 
Tom BeckCommented:
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.
0
 
jonathanduane2010Author Commented:
ok i have made the background image smaller and its improved it slightly
0
 
Tom BeckCommented:
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
0
 
jonathanduane2010Author 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?
0
 
Tom BeckCommented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.