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

Incorrect Tooltip DisplayWhat could be causing the issue with

I am facing an issue when trying to add a tooltip to a glyphicon within a tile. It doesn't seem to work correctly when it should. However, placing the tooltip outside of the tile works fine. I'm quite perplexed and would greatly appreciate any as ...

javascriptjqueryhtmljquery-ui-tooltip

Troubleshooting problems with the width of CSS grid underlines within a scrolling container

There seems to be an issue with the underlining border in this example not extending across the entire width of the container. Any suggestions on how to resolve this would be greatly appreciated. .outer-container { width: 200px; overflow: auto; } . ...

htmlcsscss-grid

Guide to changing the color of SVG images on a live webpage

I'm having trouble changing the color of a specific part within an svg image (created in Inkscape). I believe CSS is the solution, but I can't seem to select the id from the particular SVG file. The object in the SVG has the id='ToChange&apo ...

javascripthtmlcsssvg

The range filter is exclusive to the initial controller

My range filter (see code below) is only working on my first controller. I have added the same filter to other controllers in the app.js and HTML, but it's not functioning for some reason. I checked the console for errors, but there are none. Here i ...

javascripthtmlangularjs

Is there a way to iterate through identical sections of HTML using BeautifulSoup?

Looking to extract information from each of the "item watching" elements within the "items" class. Currently facing a challenge where using the find method only retrieves HTML for the first occurrence of "item watching". Aiming to avoid utilizing find_all ...

pythonhtmlbeautifulsoup

data being returned twice onpopstate

After experimenting with onpopstate, I encountered an issue. When I click the back button in my browser, the URL changes as expected, but the page code loads twice, resulting in duplicate lists and div elements. Why is this happening and how can it be reso ...

javascriptajaxhtmlurl

"Discover the versatility of implementing a single ag grid across various components, all while dynamically adjusting its style

I am facing an issue where I have an angular grid ag-grid in component1, which is being used in some other component2. Now, I need to use the same component1 in component3 but with a different class for ag-grid, specifically 'ag-grid-theme-dark'. ...

cssangularag-grid

Is there a way to continuously click on a button 99 times or until the code finishes running?

Need Assistance, Please Assist. I am encountering an issue where I have the same type of skip button with identical name and id properties for all products, but only the xpath changes. Can you provide guidance on how to efficiently click on 99 similar ski ...

javascripthtmlseleniumtestingselenium-webdriver

Is it possible to incorporate Microdata from HTML5 into an XHTML Strict website while remaining compliant?

I have a website coded in XHTML 1.0 Strict and I am looking to incorporate Microdata for breadcrumbs so that Google can better understand them. Currently, my non-microdata marked-up breadcrumbs are structured like this: <ul> <li><a href= ...

validationhtmlbreadcrumbsxhtml-1.0-strictmicrodata

What is the best way to enclose text within a border on a button?

I am trying to create a button with a colored border around its text. Here is the code for my button: <input id="btnexit" class="exitbutton" type="button" value="Exit" name="btnExit"></input> Although I have already added CSS styles for the ...

htmlcss

Unable to decrease the width of a div element in Vuetify and Nuxt

As I work on creating a dynamic form with fields that need to occupy only 50% of the size of a regular field, I encounter different components based on data provided by Vuex. The use of v-for in Vue.js helps me loop through form objects and render the app ...

javascripthtmlcssvue.jsvuetify.js

drop down menu in navigation bar: unable to display items

I am having trouble with a dropdown menu in my code. Even though I used the code from the official Bootstrap website, the items are not appearing in the dropdown list. <nav class="navbar navbar-expand-lg navbar-dark bg-primary "> ...

htmlangular6angular-ui-bootstrap

increase the number of rows in the table automatically

I've encountered an issue while working on a form that involves getting a value from a jQuery spinner and dynamically adding that number of rows to a table inside the form. Despite using firebug to debug, I couldn't pinpoint the exact cause of th ...

jqueryhtml

Is there a way to achieve a double background color effect in CSS while ensuring that the text is centered within the second background color element?

How can I achieve a layout similar to the one shown in this image: ul menu li tags Should I use two tags for each element? Here is an example: <ul class="menu"> <div class="outside"><li class="inside"><a href="#">Firefox</a ...

htmlcsshtml-listsmenuitem

Does an href and click events both happen simultaneously?

JavaScript Purpose: Implement a series of loops and create anchor links with the 'href' attribute <a class="mui-control-item" v-for="(item, index) in dai" v-on:click ="abc(item)" :href="'#item'+(index+1)+ 'mobile'" ...

javascripthtmlvue.js

Switch out the arrow icon in the dropdown menu with an SVG graphic

Looking for a way to customize the dropdown caret in a semantic-ui-react component? Here's how it currently appears: <Dropdown className="hello-dropdown" placeholder="Comapany" onChange={this.someFunction} options={som ...

javascripthtmlcssreactjssvg

What causes *ngIf to display blank boxes and what is the solution to resolve this problem?

I am currently working on an HTML project where I need to display objects from an array using Angular. My goal is to only show the objects in the array that are not empty. While I have managed to hide the content of empty objects, the boxes holding this co ...

htmlcssarraysangulartypescript

How can you use JavaScript to identify resize or zoom changes across all ancestor DOM elements?

I have a DOM element that consists of a chart. <div id="plot1" class='plot-chart'></div> This specific DIV can be nested within various other DIVs. <div id="one" style="width:100%;height:100%;zoom:0.9;"> <div id="two"& ...

javascriptcss

A user-friendly JavaScript framework focused on manipulating the DOM using a module approach and aiming to mirror the ease of use found in jQuery

This is simply a training exercise. I have created a script for solving this using the resource (function(window) { function smp(selector) { return new smpObj(selector); } function smpObj(selector) { this.length = 0; i ...

javascripthtmlcssdomframeworks

Is it common for content to duplicate when using the 'position: fixed' property in CSS media print?

Consider the following div element: ... <div id='section-to-print'>CONT /*Content*/ </div> ... Accompanied by this CSS code snippet: @media print { * { -webkit-transition: none !important; ...

cssprintingpositionduplicatesfixed