Styling for main banner image on large desktop screens and mobile devices

I need help with website design and CSS solutions. Currently, I have a WordPress website with a onepager theme. At the top of the page, there is an image that almost fills the screen along with a title. My concern is how this image behaves with different browser and window sizes.

On my current screen size, everything looks good. However, if I were to view it on a wider screen, the image expands in width, causing me to only see a small portion of it vertically. This makes sense due to the proportions being maintained based on width. Additionally, viewing it on mobile presents another issue.

Here is a sample link to better illustrate: jthemes.org/wp/uniset/demo9

  • Try opening it on a wide screen and observe the result...
  • Experiment with other sizes...
  • View it on a mobile device...

What is the best way to address these issues? What approach is commonly used for such situations?

Snippets: CSS:

.vc_custom_1525172849260 {
    margin-bottom: 0px !important;
    padding-top: 240px !important;
    padding-bottom: 180px !important;
    background-image: url(http://jthemes.org/wp/uniset/demo9/wp-content/uploads/sites/9/2018/05/hero-8.jpg?id=230) !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;

Html

<div data-vc-full-width="true" data-vc-full-width-init="true" class="vc_row wpb_row vc_row-fluid bg-scroll vc_custom_1525172849260 vc_row-has-fill vc_row-o-content-middle vc_row-flex" style="position: relative; left: 0px; box-sizing: border-box; width: 1165px; padding-left: 0px; padding-right: 0px;"><div class="wpb_column vc_column_container vc_col-sm-10"><div class="vc_column-inner vc_custom_1519925212553"><div class="wpb_wrapper">                
        <div class="title-subtitle-wrap text-left ">

            <!-- Title -->  
            <h3 style="font-size:110px; color: #222222">FIND YOUR TIPPING POINT</h3>
                        <!-- Big Text -->
                <p class="p-lg text-left" style="color: #333333">Nullam tempor sapien, eget gravida. Donec enim ipsum porta justo integer at odio velna vitae auctor integer congue magna impedit magna viverra</p>            
                    </div>
        </div></div></div><div class="wpb_column vc_column_container vc_col-sm-2"><div class="vc_column-inner "><div class="wpb_wrapper"></div></div></div></div>
htmlcssresponsive-design

Answer №1

To achieve this effect, you can simply use the width: 100% css styling or wrap it inside a div tag.

img {
  width: 100%;
}
<img src="http://jthemes.org/wp/uniset/demo9/wp-content/uploads/sites/9/2018/05/banner-3-img.png">

<div>
  <img src="http://jthemes.org/wp/uniset/demo9/wp-content/uploads/sites/9/2018/05/banner-3-img.png">
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The positioning in CSS is not functioning as expected in a customized component

https://codesandbox.io/s/71j1omvz66 Struggling to shift the chat component to a new position. Any ideas on how to make it move? ...

cssreactjs

The .ogv video file type does not seem to be functioning properly within the HTML5 video tag on Firefox

Hello, I'm encountering some issues with playing the .ogv file in Firefox. If you could take a look at the link , that would be greatly appreciated. I believe my HTML5 video tag syntax is correct as it's working fine on other browsers. Thank you ...

htmlwordpressvideo

Exploring the Impact of 2 HostBindings on Class Generation from Inputs in Angular 4

I'm struggling with the code in my component, which looks like this: @Component({ selector: "home", templateUrl: "./home.html" }) export class Home { constructor() {} @HostBinding("class") @Input() public type: string = "alert" @HostBindi ...

cssangulartypescript

What is the best way to insert a triangle shape to the bottom of a div with an opacity level set at 0.2

https://i.stack.imgur.com/sqZpM.png I've been trying to create something similar, but my triangle keeps overlapping with the background in the next section. I've already spent 3 hours on it. Any help would be greatly appreciated. Check out my c ...

htmlcssangularsass

What steps can I take to completely remove JavaScript from an HTML document?

To eliminate the <script> tags in the HTML, I can utilize regex just like this $html = preg_replace('#<script(.*?)>(.*?)</script>#is','', $html); While this approach works well, dealing with inline JavaScript require ...

javascriptphphtmlregex

Ensure the TUMBLR og:image appears in larger dimensions for enhanced visibility [updated: additional code implemented]

I recently incorporated two widgets into my blog - one on the sidebar and another attached to each post. You can check them out at . To enhance the visual appeal, I uploaded a 900x900 og:image to the tumblr static servers, accessible through my FB Debug p ...

cssfacebookobjectfacebook-opengraphtumblr

Switching Image Values in JavaScript: A Quick Guide

After successfully using a JavaScript function to swap the src of two images, I encountered an issue. I also needed to switch two values associated with the images so that I could calculate them later. For example: img src="ble.jpg" id="F" value="" onclic ...

javascripthtmlimage

Ensuring Contact Form Accuracy with Jquery Validation

I am trying to implement form validation using jQuery. Here is the code I am using: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2 /jquery.min.js"></script> <script type="text/javascript" src=" http:// ...

jqueryhtmljquery-validatevalidation

How to apply a custom CSS class to a Smarty tag in CMS Made Simple

Greetings! I am currently in the process of revamping a page using CMSmadesimple, However, I have limited knowledge when it comes to utilizing CMSms and Smartytags. The page contains various smartytags that require styling. One particular tag that needs ...

csscontent-management-systemsmartycmsmadesimple

Sass - Retain the original class hierarchy

Apologies for the vague title, I couldn't think of a better one. As I compile my scss, this piece of code: .foo { ... &__bar { ... } } transforms into the expected output below: .foo { ... } .foo__bar { ... } However, I actually need it t ...

csswebpacksass

Simple 3-column grid design in HTML and CSS

My task is to design a 3-grid layout that resembles the following structure: ------------------------------------- | Image | The name of logo | > | ------------------------------------- I attempted this using the code below: <div class=" ...

htmlcssbootstrap-4

The collapsible section expands upon loading the page

Trying to implement Disqus as a plugin on my test webpage, I created a collapsible section with a "Show comments" button. The idea was to hide the plugin by default and reveal it only when users click on "Show comments". Despite using the w3schools example ...

javascripthtmlcsscollapsable

The application of document.body.style.backgroundColor is not compatible with an external CSS style sheet

Why does document.body.style.backgroundColor not work with an external CSS style sheet? I have the following CSS: body { background-color: red; } In my css style sheet, when I use JavaScript alert alert(document.body.style.backgroundColor);, it sh ...

javascripthtmlcss

Concealing an element upon clicking with jQuery

Can someone help me with this issue? I'm trying to use jQuery to hide the div element with the ID 'professional-panel' when a button with the ID 'hideButton' is clicked. I know it should be simple, but I'm new to jQuery and s ...

jqueryhtml

Try triggering transitions on all elements by hovering over any CSS element

I am currently in the process of developing a website, and for the header section, I have decided to use a table format where each column represents a different section. The top row will feature a picture link, while the bottom row will display the name of ...

htmlcsscss-transitions

managing the HTML class names and IDs for various functions such as styling, jQuery interactions, and Selenium automation

While there is an abundance of articles on writing clean HTML/CSS, one aspect that seems to be lacking advice is how to organize class names and IDs for different purposes such as design, jQuery, and Selenium testing. The challenge lies in deciphering the ...

javascriptjqueryhtmlcssselenium

margin around the masterpage

Currently, I am utilizing a master page in ASP.NET (using Visual Studio Express 2015) and overall everything is functioning properly. However, there seems to be an unsightly space around the edges when viewing it in a browser. While not a critical issue, ...

asp.nethtml

Developing Angular 6 for dynamic HTML navigation tabs

Being new to Angular 6, I recently created tabs in HTML and now need to convert them into Angular 6 while also making them dynamic. Here is the original HTML code: <ul class="nav nav-tabs side_nav" role="tablist"> <li role="presentation" class= ...

htmlangulartabsangular6

What is the best way to transition an absolute positioned element from right to center?

When hovering over an overlay element, I want the <h3> tag to appear with a transition effect from right to center, similar to the example shown here. Could someone please assist me in achieving this? Thank you in advance. HTML <div class="row m ...

javascriptjquerycss

Get the value of an HTML element

Is there a way to retrieve the value of an HTML element using PHP or JavaScript, especially when the value is dynamically loaded from another source? I have tried using jQuery with the DOM ready event, but often encounter the issue where the element's ...

javascriptphpjqueryhtml