Solved

website on mobile

Posted on 2014-03-05
14
170 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
  • 2
14 Comments
 
LVL 35

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 35

Expert Comment

by:Dan Craciun
ID: 39907621
Have you checked your site in Safari?
0
Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

 

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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

Suggested Solutions

Find out what you should include to make the best professional email signature for your organization.
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
This video teaches users how to migrate an existing Wordpress website to a new domain.

734 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