Expand the width of a single-page layout on a WordPress template

Currently, I am utilizing a full-width template from the Sela theme found at https://wordpress.org/themes/sela/. My goal is to extend the width of this full-width template on a specific page so that it matches the length of the navigation bar. The particular page in question is located at .

I have attempted to make this adjustment by incorporating information obtained from various online sources into my css:

.page-template-full-width-page .content-wrapper.full-width.without-featured-image { margin: 0; }

Unfortunately, this addition did not achieve the desired outcome. Therefore, I am open to any suggestions or recommendations on how best to modify the width of the template effectively.

htmlcsswordpress

Answer №1

Your page template is being affected by media queries.

@media screen and (min-width: 1180px)
.site {
    margin: 0 auto;
    max-width: 1180px;
    padding: 0;
}

To make the desired changes, simply adjust the max-width value:

@media screen and (min-width: 1180px)
.site {
    max-width: 100%;
}

I recommend:

A) Creating a custom page template and setting .site to 100% if it's only one page that needs modification.

Keep in mind that changing the max-width to 100% within the media queries may not be effective on larger screens.

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

Receive notification through the WooCommerce REST API when a new order is placed

Currently, I am utilizing the WooCommerce REST API along with a PHP library to showcase orders on a webpage. I have a desire to incorporate a sound alert system that notifies me when a new order is placed. Although setting up the audio notification can b ...

phpjsonwordpressrestwoocommerce

JavaScript incorporates input range sliding, causing a freeze when the mouse slides rapidly

Currently working on a custom slider and encountering an issue. When quickly moving the mouse outside the slider's range horizontally, exceeding its width, the slider doesn't smoothly transition to minimum or maximum values. Instead, there seems ...

javascripthtmlcss

I am facing difficulties accessing an element within a controller in Angular

Struggling to access an element inside an AngularJS controller, I attempted the following: var imageInput = document.getElementById("myImage"); Unfortunately, this approach was unsuccessful as the element returned null. Curiously, when placing the statem ...

javascripthtmlangularjs

Is it possible to create a single code that can be used for various buttons that perform the same function?

Whenever I click the right button, the left button appears and when I reach the last page, the right button disappears. However, this behavior is affecting both sections. Is there a way to write separate code for each section? I managed to make it work by ...

javascriptjqueryhtmlcss

What is the best way to ensure that all my table images are uniform in size?

Despite creating a table with images all sized 150x150px, I am encountering some inconsistencies where certain images appear larger or smaller than others. Interestingly, when I input the code into JSFiddle, everything appears to be working properly. Howe ...

htmlcsscss-tables

The dropdown menu fails to update in Internet Explorer

Here is the URL for my website: . On this page, there are two fields - category and subcategory. When a category is selected, the corresponding subcategory should change accordingly. This functionality works smoothly in Google Chrome, however it encounte ...

javascriptmysqlhtml

What is causing compatibility issues between html5lightbox and angular?

After integrating angular.js into my project, I encountered an issue with html5lightbox not working as expected. Instead of opening images and PDF files in a lightbox, clicking on a link takes me to another page. var app = angular.module('MyApp&apos ...

javascriptjqueryhtmlangularjslightbox

Pattern Matching for Arabic Numerals

I'm currently working on a form with a validation JQuery function, and I've encountered an issue with the telephone field. I want users to input numbers only. The validation works perfectly on the English form, but when I try entering numbers usi ...

jqueryhtmlregexvalidationarabic

Building a collapsible toggle feature with an SVG icon using HTML and CSS

I am trying to swap a FontAwesome Icon with a Google Materials SVG Icon when a collapsible table button toggle is pressed (changing from a down arrow to an up arrow). I have been struggling to get the Google Material Icons code to work. How can I resolve t ...

javascripthtmlcsstwitter-bootstrapmaterial-ui

Alert: Converting an array to a string may result in unexpected behavior

I am currently working on implementing pagination and encountered an error. This is my first time working with this, so any help would be greatly appreciated. Thank you! try { // Determine the total number of items in the table $total = $con -> ...

phphtml

Display the initial three image components on the HTML webpage, then simply click on the "load more" button to reveal the subsequent two elements

I've created a div with the id #myList, which contains 8 sub-divs each with an image. My goal is to initially load the first 3 images and then have the ability to load more when clicking on load more. I attempted to follow this jsfiddle example Bel ...

javascriptjqueryhtmlcss

Sass can be used to create custom color classes for Bootstrap 5.3 that offer

I am currently using a Bootstrap 5.3 theme and I would like to give users the option to change the main color theme from the default blue to something like purple or orange. My idea is to create additional CSS files named "orange-as-primary.css", "purple- ...

csssassbootstrap-5color-scheme

The Hover Hover textbox stays in place once clicked on

I have implemented a search bar that displays a textbox when a user hovers over a button. I am looking to modify the code so that the textbox remains visible even after the user has clicked on it. This way, if the user accidentally moves their mouse away f ...

javascriptjqueryhtmlcss

An unusual problem arose within the Django template

When I use the action method in Django, I pass a parameter called deletable_objects to the template and it works perfectly. The code for this is: deletable_objects, perms_needed, protected = get_deleted_objects( queryset, opts, request.user ...

pythonhtmldjango

Fixed Row Feature in Visual Composer

Currently, as I work on a website in Wordpress utilizing the Visual Composer page builder, I have encountered a dilemma. I am attempting to ensure a row remains sticky at the top of the page. In an effort to achieve this, I have inserted the following CSS ...

csssticky

Working with Thymeleaf and DatePicker to establish a minimum date

Looking to establish a minimum selectable date in my datepicker using Thymeleaf. Attempted code: <label th:utext="#{${name}}" th:for="${name}" class="control-label"></label> <div class="input-group input-group-prepend"> <span cla ...

javascripthtmldatepickerthymeleaf

Using jQuery to access the ID of a div and create a custom close button

I am trying to implement a close button for my popup DIVs. Each one has a unique ID and I want to hide them by setting the CSS 'display' property to 'none' when closed. However, the following example is not functioning as expected. I a ...

javascriptjqueryhtmlcssbutton

Using React to Dynamically Render a Form Select with Two Pre-Defined Options (and mapping the remaining options)

Being relatively new to front-end development, especially React, I'm typically more of a back-end developer. Recently, the other developers on my team have left the company, leaving me alone to figure out the entire stack of our platform written in Re ...

htmlreactjs

The Prezi HTML5 Editor using impress.js technology

Recently, I discovered that impress.js was created as an HTML5 alternative to Prezi. This transition allows us to shift away from Flash technology and adopt an open web standard that is compatible with all platforms. Despite the advantages, manually input ...

javascriptflashhtmlwysiwygprezi

Enhance the appearance of the og:image by applying CSS styling

Can CSS styling be applied to a dynamic facebook og:image used for Facebook shares? Instead of using a static image, I'd like to add some custom styling such as a colored block in the top right corner with styled text. Currently, my tag simply grabs ...

cssfacebook-opengraph