Background image of feature in hompage not responsive

  • thbarbillion2019

    (@thbarbillion2019)


    7 years, 3 months ago

    Hello,

    I hope I’m placing this in the right topic on the forum.

    Im building this website for a friend of mine:
    http://computerservicezeewolde.nl/motorservice3/

    My website seems to work fine but on my mobile phone two of the background images on the homepage are not resizing properly (it’s the one with the silver and black bike and the photo with all the race bikes in a row). I’ve tried searching for a solution and I ended up on this website:
    https://wpbloggingnerd.org/how-to-make-background-images-responsive-in-wordpress/

    So I tried customizing my CSS with something like this:

    aside.widget:nth-child(6) > section:nth-child(1)
{
background: #000000 url(http://computerservicezeewolde.nl/motorservice3/wp-content/uploads/2019/02/foto-3.jpg) no-repeat center top;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

@media only screen and (max-width: 478px) {
aside.widget:nth-child(6) > section:nth-child(1) {
background-size: 100%;
}
}

    But that didn’t work. Next to that I have another issue. When I open the website on mobile there is a huge whitespace next to my website that I can scroll to. I would like the website to respect the screen size and not get any bigger then needed.

    So in short I have two issues:
    1. two background images are not responsive on the mobile view
    2. Website is wider then it needs to be on the mobile view

    Help would be much appreciated,

    Kind regards,
    Thomas

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

Viewing 11 replies - 1 through 11 (of 11 total)
  • Kartik Shukla

    (@kartiks16)

    7 years, 3 months ago

    Hello thbarbillion2019,

    What I observed is that is how the theme you used “Construction-Field” is developed. I reviewed the demo and found an image with a Light-House and it also cuts the image and makes it display on the center part when in Mobile.

    Further for the White area, it can be due to the CSS modification you made, can you please remove all the CSS that you tried and see if the whitespace still appears.

    Thanks,
    Kartik

    Thread Starter thbarbillion2019

    (@thbarbillion2019)

    7 years, 3 months ago

    Hi Kartik,

    Thanks for your response. after removing:

    /*.container {
	width: 900px;
}*/
section.primary-bg
{
	height: 250px;
}

.openingstijden tr td
{
	border:none;
	padding: 1px;
}

.image-slider-wrapper .slider-content p, .image-slider-wrapper .slider-content
{
	font-weight: 700;
}

    I still have the wide website issue on mobile.

    As for the images in the background. I believe you are right and unfortunately the theme is setup this way. But is there anyway to correct it?

    Kind regards,
    Thomas

    Kartik Shukla

    (@kartiks16)

    7 years, 3 months ago

    Hey Thomas,

    No, I see that the White Space that use to appear in Right have vanished and the site is showing properly on Mobile View.

    Further for Theme image issue, I would suggest you approach their specific support forum so you can get a better solution to this.

    Theme Support: https://wordpress.org/support/theme/construction-field/

    Hope this information helps.

    Thanks,
    Kartik

    Thread Starter thbarbillion2019

    (@thbarbillion2019)

    7 years, 3 months ago

    Hi Kartik,

    Thanks for checking. After clearing the cache on my phone the whitespace still appears. (Iphone XS max). So that’s strange but actually the least of my problems.

    I will try to raise a thread on their forum as well. But maybe someone can come up with some CSS I can try based on:
    https://wpbloggingnerd.org/how-to-make-background-images-responsive-in-wordpress/

    Would be really appreciated.
    Regards,
    Thomas

    Kartik Shukla

    (@kartiks16)

    7 years, 3 months ago

    Hello thbarbillion2019

    Is it possible to share a screenshot, so we can be on the same page?

    Thread Starter thbarbillion2019

    (@thbarbillion2019)

    7 years, 3 months ago

    Yes sure!

    http://computerservicezeewolde.nl/motorservice3/wp-content/uploads/2019/02/Image-1.jpg

    Kind regards,
    Thomas

    Kartik Shukla

    (@kartiks16)

    7 years, 3 months ago

    Gotcha!

    The Problematic element is Footer.

    I think you have added a custom-html-widget for Google Map which is appearing in Footer.

    The HTML code used in that has a div which have the width set to 720px which is showing that extra white space.

    Can you please check that.

    I think this will solve the whitespace issue.

    Thanks,
    Kartik

    Thread Starter thbarbillion2019

    (@thbarbillion2019)

    7 years, 3 months ago

    Yes! Thanks Kartik. That’s one issue (I created myself haha) solved!
    I changed width to 100% instead.

    Now the other issue is still going on. I checked the website of ACME themes and I need to pay for a year of support. it’s approx 50 dollars. which is OK, but I feel it’s not a hard fix as per the website I shared earlier so before I pay I would like to give it a shot with some custom CSS.

    If you or anyone else has a suggestion that would be great.
    Otherwise it might even be cheaper to ask a developer to fix it for me.

    Regards
    Thomas

    Kartik Shukla

    (@kartiks16)

    7 years, 3 months ago

    Hello

    Happy to know that whitearea issue is now resolved.

    Now circling back to another issue which is related to parallax.

    Check this demo: https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm

    Mostly for parallax effect, it is recommended that we use an image in which objects/elements are in the center, as in smaller devices like mobile it will cut the image from left and right and only the center section would appear.

    Focus on the Girl holding a camera in the demo.

    Hope this helps.

    Thanks.

    Thread Starter thbarbillion2019

    (@thbarbillion2019)

    7 years, 3 months ago

    Hi Kartiks,

    Yes I understand what you are saying. But, when I open the demo https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm on my mobile phone it still looks a whole lot better then on my website. It really takes only a small portion of the background image and you can just see the pixels pop-out.

    If my website would work even close as your demo I would be very happy! I understand the photo needs to be cut.

    This is how your demo looks on my mobile phone:
    http://computerservicezeewolde.nl/motorservice3/wp-content/uploads/2019/02/1.PNG

    This is my theme on my mobile phone:
    http://computerservicezeewolde.nl/motorservice3/wp-content/uploads/2019/02/2.PNG

    Regards,
    Thomas

    Thread Starter thbarbillion2019

    (@thbarbillion2019)

    7 years, 3 months ago

    I understand the issue is probably within my theme.
    But I still hope to find anyone who is good at CSS that can maybe help me?
    Otherwise lets mark it as resolved and I will move my questions to a more generic forum/community.

    Thanks,

    Kind regards,
    Thomas

Viewing 11 replies - 1 through 11 (of 11 total)

The topic ‘Background image of feature in hompage not responsive’ is closed to new replies.