Expanding Visual Composer (WP bakery): fitting smaller images into the viewport

Incorporating Visual Composer (WP Bakery), I have successfully implemented a banner image with a width of 1200px. However, the challenge arises as the maximum viewport width is 1900px. My goal is to configure a Row containing a Single Image element that will expand the image to match the full 1900px width while maintaining its original height.

Even after applying "stretch row and content (no padding)" for my Row settings, the single image element remains aligned to the left of the viewport. This results in 700px of white space on the right side when the screen width is at 1900px, failing to stretch the image proportionally.

Are there any suggestions on how to achieve both stretching the image and preserving its height? Or should I create a new image specifically tailored to fit the 1900px width?

csswordpressvisual-composer

Answer №1

While searching for a solution to a particular question, I stumbled upon this answer. To address the issue, I assigned a css class of fullWidthImageRow to the row and made the following modifications to the theme.css

div.fullWidthImageRow > .wpb_column > .vc_column-inner > .wpb_wrapper > .wpb_single_image > figure {
    width: 100% !important;
}
div.fullWidthImageRow > .wpb_column > .vc_column-inner > .wpb_wrapper > .wpb_single_image > figure > div {
    width: 100% !important;
}
div.fullWidthImageRow > .wpb_column > .vc_column-inner > .wpb_wrapper > .wpb_single_image > figure > div > img {
    width: 100% !important;
}

This method is effective on the latest version of WPBakery.

Answer №2

In the most recent update, I have made use of the following code snippet:

div.fullWidthImageRow > .wpb_column > .vc_column-inner > .wpb_wrapper > .type-image > img {
    width: 100% !important;
}

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

Adjusting the orientation of an image using CSS3 depending on the position of the mouse

So I discovered that it's possible to make an image pan left or right using CSS3. Here's an example: HTML <html> <div> <img src="pic.png" class="pan"> </div </html> CSS .pan:hover { margin-right: -50px; } That& ...

javascripthtmlcss

What's the issue with this HTML button not functioning properly?

I'm having an issue with a button in my code that is supposed to change the text from 'hello' to 'Goodbye', but for some reason, it's not working. I have ensured that my code is properly indented in my coding program. Below i ...

javascripthtmlcssbutton

Need help aligning content with flexbox? Having trouble with align-content and justify-content not working correctly?

First and foremost, I want to express my gratitude in advance for any assistance you can provide. My goal was to neatly align three pieces of content within each row, similar to the image displayed here: https://i.sstatic.net/vtsRj.png To achieve this lay ...

htmlcssreactjsflexbox

What is the best method to reset CSS font styles for all children elements within a specific div?

Within my default style sheet, I have defined the default font in the following manner: body, div, span, ... { font:normal normal normal 13px Arial, helvetica, Sans-Serif; } While this setting works well overall, it becomes problematic when a third-p ...

css

Updating form validation: relocating error messages

When using a jQuery form validation script, an "OK!" message is typically displayed below the input field when the input is correct. However, I would like to customize this behavior and have the "OK!" message appear on the right side of the field instead ( ...

javascriptjqueryhtmlcss

Animate the child element of this selector using jQuery

When using the this selector to animate an image within the li and a elements, I encountered a problem. Here is the Jquery code snippet: jQuery(document).ready(function () { jQuery(".jcarousel-skin-tango li").mouseenter(function () { ...

jqueryhtmlcss

Cannot get the arrow to rotate using Jquery's css() function

Having trouble using css() to rotate my arrow $(function() { $("#arrowAnim").css("transform:","rotate(300deg)"); }); Check out the fiddle here: https://jsfiddle.net/u4wx093a/10/ I've looked for similar issues but can't seem to solve it on my o ...

javascriptjquerycss

Encase a table cell containing a lengthy word

I attempted to implement the solution outlined here: How to wrap table cell at a maximum width in full width table However, I am facing difficulties in wrapping the line containing "xxxxxxxxxxxxx". <table class="my-list table table-bordered table-hove ...

htmlcss

Flyer - Chart "dimmed" and unselectable when dimensions are specified as a proportion

I am currently working on displaying a map within a container. I have successfully been able to display the map by setting its size to a specified number of pixels. However, my goal is to have the height of the map adapt to the size of the container dynami ...

htmlcssleaflet

Looking to organize my divs by data attributes when clicked - how can I achieve this with javascript?

I am looking to implement a dropdown sorting functionality for multiple divs based on different data attributes such as price and popularity. The specific divs are labeled as "element-1" and are contained within the "board-container". var divList = $(". ...

javascriptjqueryhtmlcss

Ways to modify the color of text in a hyperlink?

When working with hyperlink generation like the code snippet below, the typical blue color can be less than ideal. How can I dynamically change the font color of this hyperlink using JavaScript? $element.html(indicator.link(url)); ...

javascripthtmlcsshyperlink

What is the method for printing a webpage that has been modified using JavaScript?

Take a look at this screenshot to see what I'm working with. Users have the ability to modify the page by removing items, adding new items, or marking items as complete by crossing them out. I want users to be able to print the altered page using Jav ...

javascriptcssruby-on-railspdfprinting

Use an image from an array and assign it as the background image for a specific class on an HTML page by

In my array called items, there are three items. I randomly selected 2 items, took their labels, and displayed them in 2 boxes within a <p> tag. I want the URL of the selected item to be displayed as a background image of the corresponding box. For ...

javascripthtmlcss

Exploring AngularJS: A Guide to Accessing Millisecond Time

Is there a way to add milliseconds in Time using AngularJS and its "Interval" option with 2 digits? Below is the code snippet, can someone guide me on how to achieve this? AngularJs Code var app = angular.module('myApp', []); app.controller(&ap ...

javascripthtmlcssangularjs

Struggling to align the header of a column to the center in a mat-table that is sortable?

I am working with a mat-table that has a sortable column similar to the example shown here, but I am having trouble centering the column headers using my CSS file. Interestingly enough, I am able to achieve this when making changes in the browser debugger! ...

htmlcssangular-materialmat-table

Attempting to position a unique field following the total amount on the checkout page within woocommerce

I have a piece of code that works properly but it's not positioning the custom field where I want it to be. In the add_action function, I am trying to use 'woocommerce_review_order_after_order_total' as the location attribute to display it o ...

phpwordpresswoocommerce

Function returning undefined when accessing prototype property in JavaScript

When attempting to create an image rotator using prototypal inheritance, I am encountering an error in the console showing: TypeError: this.curPhoto is undefined this.curPhoto.removeClass('previous'); I have placed this code in the callb ...

javascriptjquerycssprototypeprototypal-inheritance

Simple steps to emphasize a table cell in Angular 2

Essentially, I have a table structured as shown below <table> <tr> <td>Date</td> <td>Time</td> <tr> <table> The goal is to make both the date and time clickable within this table. When clicking on the date, ...

htmlcssangulartypescript

Inconsistent Responsiveness of CSS Search Bar

I'm currently in the process of developing a mobile-friendly GitHub Homepage Clone using HTML and CSS, with plans to integrate JS at a later stage. My main focus right now is on refining the search bar functionality. However, I've encountered an ...

htmlcssflexbox

Discover the process of verifying identical credentials in WordPress and Node.js

Wondering how to enable users to login to a WordPress site using the same credentials as an Angular/Node site? We aim to provide a seamless experience where users don't have to create a new account on WordPress. Looking for suggestions on implementing ...

node.jswordpressangular