• This page is reachable only from mobile (I mean by link). How can I reduce (mobile vision) the space between the search box in orange and the header?

    page class is .page-id-11400

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Using keywords like “wordpress additional css” will lead you to numerous tutorials on how to add custom CSS to your WordPress site.

    Moderator bcworkz

    (@bcworkz)

    There really is no content on this page? The page content still takes up space as padding. If there is not any content, you can hide its container to get rid of the padding.

    .page-id-11400 main#primary {
        display: none;
    }

    Add to additional CSS like ren suggests, or since you have a customized theme, you could add it to the bottom of the theme’s style.css.

    Thread Starter sacconi

    (@sacconi)

    This seems to be ok. The page has to show only the search box from mobile. Is there a system for this page not to be reached from big devices? Another idea could be doing the same but putting the search filter in the main container and hide the secondary. The purpuse is to show only the searchbox from a mobile and small devices. The current solution is ok from mobiles but if the screen is 400-600 px large (maybe tablets), it’s not nice to see, the image on top is deformed

    Moderator bcworkz

    (@bcworkz)

    A deformed image is most likely a CSS issue and not directly related to the device being used. By “deformed” do you mean poor resolution or blurry? I took “deformed” to mean the image’s aspect ratio is incorrect. But a blurry image is because the source image is not large enough for the size of its container. You either need a larger image or a smaller container when width is > 300px.

    You cannot prevent a non-mobile device from requesting the page. You can make it difficult by only offering the link to mobile devices. If the link shows up in search results, you can be sure some non-mobile users will use the link. How would you like to handle non-mobile requests for this page? You can either display alternative content, redirect elsewhere, or do nothing.

    You can use the wp_is_mobile() function to see if the requesting device is mobile or not. This has nothing to do with screen size though, mobile status is based on the user agent string containing certain keywords like “Mobile” or “Android”. An iPad with a Retina display is still seen as a mobile device even though the screen’s pixel size is larger than many laptops.

    PHP cannot directly detect a device’s screen size. PHP also cannot redirect once output has started. Determining screen size and redirects generally need to be managed client side with JavaScript.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘reducing a space’ is closed to new replies.