Problem with white space below block

Good morning Jokadesign,

This looks to be a design (CSS) issue with your theme. Can you elaborate on what you are aiming to achieve? Is it that you want block of text to be placed over the header slideshow on all devices?

Thanks,
Nick

Thanks for the reply. No, I just want it to appear directly beneath, without the gap. I have tried adding negative margin to both the image block and the text, without success. Any hints appreciated!

…although, if it does sit over the slideshow a little, I see no problem with that. I’d just like to know how to control it. Thanks.

Hi Nick, are you still able to help with this?

Hi Jokadesign,

Sorry for the delay. This is caused by your theme’s CSS. If you look at the developer view in your browser, I like Chrome, you will see that the .header-hero is set to a height of 700px. You can use media queries in your stylesheet to adjust this height for mobile devices. For example, setting this to about 400px seems to cut the gap. You will need to play with it to suit your needs.

Hope this helps,
Nick

• This reply was modified 6 years, 1 month ago by Nick Diego.

OK, thank you. I can now control it. However, I need it to be right for desktop AND mobile, and using this css method I can only adjust for a compromise. It’s certainly not responsive. Is there another way?

Hi Jokadesign,

You will need to use media queries to only apply the custom height to mobile sized screens. You theme’s stylesheet has queries already set that control the responsive nature of the site. I would advise you follow these. For example, it looks like the smallest media query in your theme is:

@media only screen and (max-width: 600px) {
    /* Add your custom CSS here */
}

This is located on line 2952 of your stylesheet. Here is another reference to media queries for general information (https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries).

Best,
Nick

Thanks very much Nick. So, could you advise what the custom css would look like, e.g.

@media only screen and (max-width: 600px) {
/(max-width: 300px)/
}

Then, Should I paste this into the style sheet or into the custom css?

On 19 Feb 2019, at 14:35, www.remarpro.com Forums <[email protected]> wrote:

@media only screen and (max-width: 600px) {
/* Add your custom CSS here */
}

Hi Nick. I thought it might be courteous to add a brief explanation of my situation… as you have provided Blox Lite for free, and so far been so helpful. I am a one-man-band and run a few WordPress websites for local clients in UK. I am not involved in coding or development, and hence the lack of basic understanding you may be sensing in my questions and answers. In this case, I suspect Blox lite is a good solution to my original problem, which was simply that the Essence Pro theme I had bought from Studiopress had no easy way to add an image slider into it’s header. I did think this was rather a big limitation. And so when I found that Blox Lite would solve this I was relieved. Your explanation of how the responsive requirement is handled by the theme (Essence Pro or Genesis?) makes some sense, but I could still do with a steer on exactly what css I need to add, and where to add it. So meany thanks, I await your advice on this.

Meanwhile, I read your page and notice you have been building other plug-ins, and wondered if you might have a solution to another problem. I need to find a directory theme or plugin for my client who is looking to start-up a b2c business directory (membership to be paid by businesses)

It needs to achieve the following:

Homescreen
a single search field for the consumer to search a directory/database (for businesses/services). The user/consumer will search by postcode in a single search field to receive a maximum of 4-5 results (businesses). The user should then be able to fill in an enquiry form and submit their request to those 4-5 results (businesses). The businesses will then be at liberty to respond with their prices/availability etc. I’m aware this may appear to be a pretty straightforward directory.

However, my problem is: I have searched the WordPress repository for free plug-ins and found ‘Business Directory Plug-in’ and ‘GEODirectory’ …amongst others, but they all seem to be far too complex for what I need. Or are they? Am I missing something obvious? Or do I need to understand them at a deeper level in order to grasp the basics?

I am happy to pay for a plug-in or theme but at this stage I don’t feel confident enough to pay for something and then find it isn’t suitable for my needs.

I would be so grateful if you could recommend or advise in anyway. I’m really stuck!

Many thanks again!

Joe

Hi Joe,

The easiest way to do this is in the Customizer. It looks like you are already using this to set the .header-hero to a height of 375px. Remove that line and add something like the following:

.header-hero {
    height: 700px;
}
@media only screen and (max-width: 600px) {
    .header-hero {
        height:375px
    }
}

A media query tells the browser to only use the styling when the screen is a certain width, in this case less than 600px.

As this is a free plugin and this support ticket really has nothing to do with the functionality of Blox Lite, rather the styling of your theme, this is all the help I can provide.

As to your second question, I am honestly not sure. While what your client it looking for may seem straightforward, from a development standpoint it sounds quite complicated if one was to build this from the ground up. It’s probably a couple thousand dollars worth of development time to do it right. Since this is a pretty massive undertaking, some of these other plugins likely have tried to build in as many features as possible to ensure they are meeting the needs of a wide variety of customers. Both of those plugin you referenced have free options so I would just try them out and see if they meet your client’s needs.

Best of luck,
Nick