The only part of my website that's responsive?

Question

I built a WordPress theme with bootstrap, The whole page is responsive apart from this part that I can't get responsive is the section below:

.showcase {
  height: 600px;
  padding: 100px 20px;
  text-align: center;
  border-bottom: #ccc 1px solid;
  margin-bottom: 30px;
  color: #fff;
}

.showcase h1 {
  font-size: 35px;
  padding-bottom: 20px;
  color: #fff;
}

.showcase p {
  font-size: 20px;
  margin-bottom: 50px;
}

<section class="showcase">
  <div class="container">
    <h1>
      <?php echo get_theme_mod('showcase_heading', 'Jon Doe'); ?>
    </h1>
    <p>
      <?php echo get_theme_mod('showcase_text', 'Making The Tractors Work For You!'); ?>
    </p>
    <a href="<?php echo get_theme_mod('btn_url', '#'); ?>" class="btn btn-primary btn-lg">
      <?php echo get_theme_mod('btn_text', 'Read More'); ?>
    </a>
  </div>
</section>

Screenshot

Any help or tips would be much appreciated, thanks.

It's hard to tell what "this part" is. Can you be more specific, perhaps add a link to your site rather than the screen shot? — jmargolisvt, Jan 03 '18 at 18:27
Hi @jmargolisvt yes its: http://www.web2dezine.com/ and the main header image that is been the problem? — Rammy7219, Jan 03 '18 at 19:41
What have you done to attempt to make this section responsive? None of the code you've shown suggests any responsive behavior. — Robert, Jan 03 '18 at 21:46
Thanks for the feedback, but the issue I think is, that the image is been brought in dynamically, which is making it hard to target to make responsive. — Rammy7219, Jan 04 '18 at 18:50

score 0 · Accepted Answer · answered Jan 06 '18 at 00:43

0

Add background-size: cover to the image in the .showcase div so that it fills it's container. Use media queries to modify the position of the image based on screen width or swap in a new image which looks better at that screen width. Here is some code to get you started:

.showcase {
  background: url(http://www.web2dezine.com/wp-content/uploads/2017/12/showcase.jpg) no-repeat center center;
  background-size: cover;
}
@media screen and (max-width:480px) {
  // modified image styles for mobile here
}

answered Jan 06 '18 at 00:43

kennycrippen

86
11

Thanks Kenny, that kind of works but can't get to fit mobile screen correctly? – Rammy7219 Jan 07 '18 at 18:58
Your best option is to create a separate mobile version of the image and use that inside of the mobile width media query. – kennycrippen Jan 09 '18 at 07:49
I'll give that a try Kenny, cheers. – Rammy7219 Feb 04 '18 at 19:18

score 0 · Answer 2 · answered Jan 06 '18 at 00:52

0

Just add background-size: contain; to the .showcase rule. This will fit the complete image into the element at all sizes.

answered Jan 06 '18 at 00:52

Johannes

64,305
18
73
130

Hi, yes I already had that added to my stylesheet but was having no effect, I have added it to head of the page with the code above and kind of works but does not fill the whole screen, leaves whitespace top and bottom. – Rammy7219 Jan 07 '18 at 18:55
then you need to use `background-size: cover`, but this will cut off some parts of the image in most situations. If you want the image to remain in its correct width/height proportions there's no other choice than those two - whichever one suits you better. – Johannes Jan 07 '18 at 20:18

The only part of my website that's responsive?

2 Answers2