Personalizing the structure of a joomla template

Having some trouble customizing my Helix Framework template. I'm trying to adjust the width of the page to be 1140 px. When I make changes in the framework menu, it only adjusts the text field width and not the graphics. How can I achieve the layout shown in the attachment below? I am aware that I could use 

body {
    width: 940px;
}

However, this causes issues with the mobile version as the page width is fixed, making it non-responsive. Is there a better way to edit the code to maintain responsiveness?

Thank you!

htmlcssjoomlawidth

Answer №1

If I comprehend your message clearly... Give this a shot

.box {
   width: 800px;
}

EDITED (comment inquiry)

.main-content-wrapper {
   margin: auto;
   max-width: 800px;
}

Answer №2

If you're looking to customize background images for different sections, check out the screenshots below

Example Screenshot1:

How to Add Background Image to a Section in Joomla Template

Example Screenshot2:

Setting Fixed Width for Container (with Background Image) in Joomla Template

1. For creating a full-size background image for any section, utilize the following code snippet (referenced by Example Screenshot1):

#sp-services-wrapper {
    background: url('insert background image link here') #b64c52 top left no-repeat;
}

2. To specify a fixed width for a particular section, use this code (shown in Example Screenshot2):

.container {
    max-width: 1170px;
}

(alternatively)

#sp-services-wrapper .container {
    max-width: 1170px;
}

Following the examples above, apply similar changes to each of your created sections

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

css element remains stationary and in view

Issue at hand: I have created a logo file named .art-obj1631017189 and I am looking to fix its position. It appears to work fine, but when scrolling down and it encounters the content section, my object falls behind the content (item-layout). I desire to ...

jqueryhtmlcss

When I toggle the div to close on mobile, I want it to show on desktop

My attempt at creating a toggle button to hide and show content was not successful. I struggle with coding in Javascript/Jquery. In the desktop view, the description displays perfectly (see image here), but in mobile view, there is a button to toggle hidi ...

javascriptjqueryhtmlcss

displaying an item within a text field

I have an input box created using Angular reactive forms <input type="text" formControlName="OrgName" placeholder="Enter name" maxlength="60"> <p class="fieldRequired" *ngIf="showNameMSg" ...

cssangularinputangular-material

Create a dynamic feature that allows users to easily add text fields within a form in

I'm looking to create a form that adds another input text field automatically when the user fills out one. Here is an example of the HTML structure: <form method="post" action="http://localhost/save" class="save"> <fieldset> <div&g ...

jqueryhtml

I encountered a frustrating issue with saving user input data using localStorage

One of my goals is to store the current inputs even if the user refreshes or closes the browser. The issue I'm facing is that when I select Yes in the radio button, then refresh the page or close the browser and reopen it, the No button is checked wh ...

javascriptjqueryhtmllocal-storage

Instructions on connecting something from manifest.json

I've encountered a dilemma while using Webpack with the CleanWebpackPlugin. Since I am utilizing an index.php file, I cannot make use of HtmlWebpackPlugin. After some research, I came across an alternative plugin known as WebpackManifestPlugin. This p ...

phphtmljsonwebpack

Position an image to the right with a specific height using position absolute in Bootstrap 4.3

enter image description hereI am in the process of updating my Bootstrap 4.0 CSS to Bootstrap 4.3 CSS. Within my price section, there are 3 pricing panels. One of these panels includes an image with absolute positioning and specific pixel coordinates - l- ...

htmlcssbootstrap-4

The results of running 'npm run dev' and 'npm run build prod' are different from each other

Currently, I am in the process of developing a progressive web app using Vue.js. During development, I utilize the command npm run dev to initiate the local server that serves the files over at http://localhost:8080/. When it comes time to build for produ ...

cssnpmwebpackvue.js

What is the process for displaying a document file in an iframe that is returned from a link's action?

I have a main page called index.cshtml. This page displays a list of document files along with an iframe next to it. My goal is to load the selected document file into the iframe when I click on any item in the list. However, currently, when I click on a d ...

javascripthtmlasp.net-mvc

Is it possible to insert clickable links within the content of a Twilio text message?

Currently, I am utilizing Twilio and Express to send programmable SMSs to the users of my web application. I'm curious if it's possible to include hyperlinks within the body of these text messages. Is there a method to achieve this? I have attem ...

javascripthtmlnode.jsexpresstwilio

"Create a div element with resizable capabilities, similar to a

Is it possible to resize elements like divs in browsers without using jQuery or other libraries like draggable or resizable? I know text-areas can be resized by default, but I'm curious if this functionality can be extended to other elements through p ...

htmlcsstextarea

Is there a way to asynchronously load image src URLs in Vue.js?

Why is the image URL printing in console but not rendering to src attribute? Is there a way to achieve this using async and await in Vue.js? <div v-for="(data, key) in imgURL" :key="key"> <img :src= "fetchImage(data)" /> </div> The i ...

javascripthtmlwebpackvue.jsasync-await

Pinterest Style Card Layout using React-Semantic-UI

Utilizing semantic-ui-react in React, I am working on displaying cards with varying heights based on the amount of text. I am aiming for a pinterest style layout where each card's height adjusts according to the content it contains. .... <Card.Co ...

cssreactjssemantic-uisemantic-ui-react

Tips for adjusting the size and position of these div containers

My Steam Inventory Viewer is experiencing an issue with items with longer names. The div container becomes bigger than others, as seen in the demo on freegamekeys.info/trade or the image at http://prntscr.com/crpqk5. I am having trouble explaining my probl ...

htmlcss

Limiting overflow:visible to input and select fields only

I'm currently facing an issue with a Lightning Web Component in Salesforce, however, I believe the root cause of this problem is not specific to this platform. Within my container div, I have row divs displaying select/combobox fields that need to ex ...

cssscrollbaroverflow

In PHP, check if the current iteration is less than 4 in a loop. If it is, then echo a specific

Consider this scenario: I have an array with 7 items and I am trying to separate them in every fourth iteration, just like this: $counter2 = 0; $counter3 = 0; $counter4 = 0; $sample_array = array('Aso','Pusa','Daga ...

phphtmlcss

The responsiveness of Angular Material appears to be limited when tested in Chrome's debug mode for different devices

I have come across a peculiar issue. Within my HTML file, I have defined two attributes: Hide me on small devices Hide me on larger than small devices When I resize the window, the attributes work as intended. However, when I enter device debug mode ( ...

javascripthtmlangularjsresponsive-designangular-material

Unlinking checkbox click event from row in Angular Material table

I am seeking to remove the ability for row selection in my table rows so that clicking anywhere within the row does not check the checkbox. I want the checkbox to only be checked when the box itself is clicked, allowing me to later add expandable rows when ...

htmlangularangular-material

Using Ajax in a separate JavaScript file

How can I retrieve data from an Ajax call made from a different .js file? Here is the code snippet I have been working with: function ajax(url, success, error) { success += "(data)"; error += "(xhr, ajaxOptions, thrownError)"; console.log("St ...

ajaxhtmljquery-mobile

Employing jQuery to implement a hover animation on IE9, it functions properly when hovering over but exhibits strange behavior upon exiting

My website features a quote box positioned to the right of the browser. When hovered over, it reveals a list of available dates. I initially tried using CSS transitions which worked on all browsers except for IE - no surprise there. So, I turned to jQuery ...

jquerycss