Solved

website on mobile

Posted on 2014-03-05
14
159 Views
Last Modified: 2014-03-09
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
0
Comment
Question by:jonathanduane2010
  • 6
  • 6
  • 2
14 Comments
 
LVL 34

Expert Comment

by:Dan Craciun
ID: 39907491
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
 

Author Comment

by:jonathanduane2010
ID: 39907602
if it looked like that i would be delighted.....

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

Expert Comment

by:Dan Craciun
ID: 39907621
Have you checked your site in Safari?
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

Author Comment

by:jonathanduane2010
ID: 39907633
yes...and i think so and i remember it being ok, i will double check....
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39907634
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
 

Author Comment

by:jonathanduane2010
ID: 39907641
how can i fix that??
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39907650
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
 

Author Comment

by:jonathanduane2010
ID: 39907663
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39907694
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
 

Author Comment

by:jonathanduane2010
ID: 39907755
ok i have made the background image smaller and its improved it slightly
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39907877
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
 

Author Comment

by:jonathanduane2010
ID: 39907892
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
 
LVL 38

Expert Comment

by:Tom Beck
ID: 39907935
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
 
LVL 38

Accepted Solution

by:
Tom Beck earned 455 total points
ID: 39909179
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

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question