Use media queries to make objects mobile responsive

  • Resolved fantasy_5

    (@fantasy_5)


    9 years, 1 month ago

    Hi!

    I have added a floating footer bar to my website and it works great. However, it falls out side of the view port when viewed in mobile browsers… so it is cut off. Here is the code

    .navbar{margin-bottom:0px !important;}

    /*WPBeginner Footer Bar*/
    .fixedBar{background: #e26fe1; bottom: 0px; color:#fff; font-family: Arial, Helvetica, sans-serif; left:0; padding: 0px 0; position:footer; font-size:16px; width:100%; z-index:99999; float:left; vertical-align:middle; margin: 0px 0 0; opacity: 0.95; font-weight: bold;}

    .boxfloat{text-align:center; width:920px; margin:0 auto}

    #tips, #tips li{margin:0; padding:0; list-style:none}

    #tips{width:920px; font-size:20px; line-height:120%;}

    #tips li{padding: 15px 0; display:none}

    #tips li a{color: #fff;}

    #tips li a:hover{text-decoration: none;}

    I have been going bonkers trying to figure it out, but can’t seem to wrap my brain around it. Also, I would like my site to be mobile responsive across all browsers rather than having to double tap in order to expand the screen.

Viewing 15 replies - 1 through 15 (of 31 total)

  • The elements with the fixed widths of 920px are keeping the page from collapsing down properly at mobile widths, which will make your site look like it has a lot of empty space off to the right on mobile widths. What you might want to do is use a media query to set those widths to 100% once the viewport width reaches the width of a tablet:

    @media only screen and (max-width: 767px) {
   #tips, .boxfloat {
      width: 100%;
   }
}

    Thread Starter fantasy_5

    (@fantasy_5)

    Hi Crouching Bruin!

    Thanks so much for your rapid response and for helping me. I tried the above media queries and the footer bar is still cut off on mobile devices. The website its self does not automatically fill the view port upon page load on a smart phone and I also checked from a kindle. The screen is justified left during the initial load and you have to double tap or expand items in order to fill the view port. There is also a large amount of white space on the right side as soon as the page loads and still if you scroll from right to left.

    1. Is there a way to have it automatically adjust to each view port for mobile phones or tablets and completely fill the screen without tapping, etc.?

    2. Are there queries that can be used to resolve this issue for all forms of mobile devices and web browsers?

    link to your site

    Thread Starter fantasy_5

    (@fantasy_5)

    Hi, Zota Marius!

    https://celebrityscope.net

    That media query should have worked. Where did you add the media query? Can you please temporarily disable your caching plugin? It makes it very difficult to examine your CSS.

    Thread Starter fantasy_5

    (@fantasy_5)

    Hi Crouching Bruin!

    I have disabled w3tc plug in. The code was added to PC Custom CSS plug in

    OK, you have some syntax errors in PC Custom CSS that are causing that media query not to work. The biggest problem is the inclusion of that stylesheet link just before the media query:

    <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family= Open+Sans|Roboto|Open Sans+Condensed|Arimo|Open%20Sans ">

    You can’t include links like this in a stylesheet, they need to go in the head section. If you take this out, or at least move the media query before this link, it should work.

    You have some other syntax errors as well that may interfere with the media query on other browsers, like Firefox, which is pretty strict about syntax errors.

    Thread Starter fantasy_5

    (@fantasy_5)

    Hi, Crouching Bruin!

    That did the trick, you’re awesome. ?? Many thanks & kinds regards!

    I have one other thing that I need assistance with of which I started a separate thread for. I know that you’re probably busy, but can you help me remove the header, title, and description from all single blog posts pages? If you can not I’ll understand and shall continue to await a response.

    For instance, this line of code was used to remove the blog’s description from these specific pages and it works just fine.

    <?php if( !is_page( array(1816, 2522, 1985, 3074, 3656, 4050, 2477 )) ){ ?>

<p><?php bloginfo('description'); ?></p>

<?php } ?>

    This one removed the header

    <?php if( !is_page( array(1816, 2522, 1985, 3074, 3656, 4050, 2477 )) ){ ?>
<div class="header-inner">

<?php } ?>

    This removed the title

    <?php if( !is_page( array(1816, 2522, 1985, 3074, 3656, 4050, 2477 )) ){ ?>

                    		<div class="logo">

                            		<a>">
                                    	<?php if( of_get_option( 'logo', true ) != '' ) { ; ?>
 	                                       <img src="<?php echo esc_url( of_get_option( 'logo', true )); ?>" / >
                                        <?php } else { ?>

    	                                    <h1><?php bloginfo('name'); ?></h1>
                                        <?php } ?>
                                    </a>

<?php } ?>

    OK, that was a bit too complicated. You don’t want to have to change the code every time you write a new post. You can do it just by adding some CSS. The <body> element of each page and post will have classes assigned to it through a call to the body_class function. So all single post pages will have the class single-post assigned to it:

    .single-post .logo {
   display: none;
}

    This should hide the logo area on all of your single posts.

    Thread Starter fantasy_5

    (@fantasy_5)

    Hi, Crouching Bruin!

    Thanks so much for the information. However, this line of code didn’t work for me. :/ I actually saw it in another thread and tried it prior to following the above steps. In order to remove the header, etc. from all pages except the home page the second method worked. I know that these lines of code are for the header,blog info description, and name/ logo. The last line assisted me in removing the menu from those particular pages too, but I just can’t think of a way to make it work for all the single posts. I would like for the information to be directly in front of the readers faces when viewing each post rather than having to look at the header, etc. Like so https://celebrityscope.net/about/ Here is a link to a review that shows the difference between having it removed vs not https://celebrityscope.net/2015/10/01/siteground-web-hosting-super-fast/

    header

    [ Moderator note: code fixed. Please wrap code in the backtick character or use the code button. ] 

    <div class="header-inner">

blog info description
<p><?php bloginfo('description'); ?></p>

<div class="logo">

                            		</a><a>">
                                    	<?php if( of_get_option( 'logo', true ) != '' ) { ; ?>
 	                                       <img src="<?php echo esc_url( of_get_option( 'logo', true )); ?>" / >
                                        <?php } else { ?>

    	                                    <h1><?php bloginfo('name'); ?></h1>
                                        <?php } ?>
                                    </a>

	menu 							<?php wp_nav_menu( array('theme_location'  => 'primary') ); ?>

    For some reason, the CSS rule that you added to your custom CSS looks like this:

    .single-post .logo {
?? ??display: none;
}

    That is, there are a couple of weird characters before the display property. Can you try clearing those out?

    Thread Starter fantasy_5

    (@fantasy_5)

    Hi, Crouching Bruin!

    Thanks so much! That’s one cool avatar and you’re one smart cookie. I also realized that by using this same code I can remove the inner header and menu from the single posts pages too. Many thanks & Kind regards! ??

    If someone else is reading this thread heare is the code to put in pc custom css plug in area to remove header, menu, and logo from all single blog posts pages.

    .single-post .logo {
   display: none;
}

.single-post .menu {
   display: none;
}

.single-post .header-inner {
   display: none;
}
    Thread Starter fantasy_5

    (@fantasy_5)

    Hi, CrouchingBruin!

    Can I bug you again for some additional help please? I have been trying to get this question answered, but no such luck.:(

    I am trying to create the google sitelinks search box for when people search for my site they can search certain parts of it directly from google’s search results page, in the same way youtube appears with the “results from youtube.com search box. Below is the Schema that I’m using, but I believe something might be off with the query beginning with “target”: line. My website is 

    <script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "url": "https://celebrityscope.net/",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://query.celebrityscope.net/search?q={search_term_string}&order=relevance&dir=desc",
    "query-input": "required name=search_term_string"
  }
}
</script>
    CrouchingBruin

    (@crouchingbruin)

    For target, try this instead:

    https://celebrityscope.net/?s={search_term_string}

    And I’m not sure how recently you added the code, but there’s this note on the Google Sitelinks Overview page:

    3. Wait for Google Search algorithms to identify your site or app as a candidate for the new Sitelinks search box.

    In other words, it might take a while for Google to identify your site.

    Thread Starter fantasy_5

    (@fantasy_5)

    Thanks so much! You are a lifesaver. ?? I just updated the code and I’m checking out the article now.

Viewing 15 replies - 1 through 15 (of 31 total)
  • The topic ‘Use media queries to make objects mobile responsive’ is closed to new replies.