Adjust the image size using CSS within the containing outer div

I am trying to adjust the width of an image using css within typo3. Unfortunately, I only have access to the outer div container which is the custom border of the content element. To make the change, I added the following line to my css file:

.Bild-Startseite img { max-width:50% !important; }

The div container has the class Bild-Startseite. However, when I resize the image, there is a blank area on the right side and the text does not align properly around it. How can I correct this issue so that the image is aligned to the right with the text flowing around it? It's important that this change only applies to this specific image and not others on the site, considering that typo3 restricts access to other containers.

You can view the site here:

Thank you

csstypo3

Answer №1

To make that function properly, it's important to customize your image container. For this particular situation:

figure.csc-textpic-image.csc-textpic-last

You mentioned that you want this customization to only apply to this specific page. To achieve this, please try the following:

#c48 figure.csc-textpic-image.csc-textpic-last {
    max-width: 400px; /* adjust as necessary */
}

I assume that #c48 is exclusive to that page, allowing the rule to be isolated to that page.

If #c48 is not unique to that page, then consider adding a CSS class to your page's body tag.

To do this, modify your typo3 template within the setup field of your main template, and add the following:

page = PAGE
page {
    ...

    bodyTagCObject {
        field = uid
        wrap = <body class="uid-|">
    }

    ...
}

By doing this, you will have a single class which can be utilized as follows:

.uid-yourIdNumberHere figure.csc-textpic-image.csc-textpic-last {

//customize your page-specific style here.

}

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

Is there a way to partially conceal the H2 text using CSS?

Is there a way to partially hide H2 text using CSS? I have the following code: HTML: <div class="twocol-box1 superflex-content-6-12"> <h2 data-content="My - Text&amp;nbsp;<span style=&quot;float:right;&quot;>M ...

htmlcss

Reset all divs to their default state except for the one that is currently active using jQuery

Here's the plan for my script: Once a user clicks on a "learn more" button, it will reveal the relevant information in the corresponding box. I'm aiming to implement a feature where if you click on another "learn more" button while one box is a ...

javascriptjquerycsscss-selectors

Applying toggle() using css to manipulate various elements at once

Is there a way to toggle multiple divs of varying heights, all with the same class? What is the most effective approach to achieve this? http://jsfiddle.net/hS6RH/41/ $('.smallify').on('click', function() { if ($(this).parent(&apo ...

jquerycss

Utilizing personalized CSS for specific ioslides

If I decide to stick with the default data and presentation of a new ioslides, changing only the second slide (## R Markdown) without affecting the entire item, how can I do this by setting up the css document accordingly? My goal is to simply adjust the f ...

cssrioslides

Combine all the HTML, JavaScript, and CSS files into a single index.html file

So here's the situation - I am utilizing a C# console application to convert four XML files into an HTML document. This particular document will be circulated among a specific group of individuals and is not intended to be hosted or used as a web app; ...

javascriptc#htmlcsswebpack

Tips for integrating CSS with Material UI TableContainer

I have utilized Material UI Grid to display data in a chart. However, the appearance of the chart does not match my expectations. Instead of resembling the desired "dense table," it looks different: Actual Look of the Chart Below is the code snippet I ha ...

javascriptcssmaterial-uinext.js

Angular2 - Incorporating a New Attribute

I am working with the following Angular2 code: <ngx-datatable-column prop="id" name="ID"> <template ngx-datatable-cell-template let-row="row" let-value="value"> <a [routerLink]="['/devicedtls',r ...

cssangular

I am experiencing issues with the detection of mouseover events on an SVG circle

I am currently working on a d3 map with zoom functionality that displays circles representing different cities. However, I am facing an issue where the mouseover event for the circles (which shows tooltips and clicking reveals some lines) seems to only reg ...

javascripthtmlcsssvgd3.js

Issue with React-Route not displaying components

Below is the code snippet from my app.js file: <Router> <Header title="My Todos List" /> <Routes> <Route path="/about" element={<About />} /> <Route path="/" ...

javascripthtmlcssreactjs

Looking to utilize the <pre> tag without any external CSS styles defined in a separate stylesheet?

In my current project, I am using bootstreap v3.2. I am facing an issue where I need to display fetched content from the database on a page using the <pre></pre> tags. However, the problem is that the content is being displayed with the default ...

htmlcss

What is the best way to utilize MUI breakpoints for displaying images based on different screen sizes?

I need help displaying an image based on the screen size using MUI breakpoints. I'm struggling to understand how to implement this with MUI. Can someone assist me with the breakpoints? interface EmptyStateProps { title: string; description: string ...

javascriptcssreactjsmaterial-ui

The flash movie covers part of the menu that is relatively positioned

While designing a website, I encountered an issue with the Flash slider (CU3ER) overlapping the menu bar. Despite trying various z-index configurations to ensure the drop-down menu stays on top, none of them seem to work. Initially, the drop-down menu rem ...

htmlcsswordpressformattingz-index

Removing Inline Styles Using jQuery Scroll Event

Whenever I reach the scroll position of 1400 and then scroll back to the top, my chat elements (chat1, chat2, chat3, chat4) receive an "empty" inline style but only for a duration of 1 second. After that, the fadeIn effect occurs again every time I scroll ...

jquerycss

A helpful tip for creating line breaks within a Vue JS v-for loop using CSS

I am looking to arrange the names in alphabetical order when a list item is clicked. My tools of choice are Vue.js and Flex Grid. The list item I am working with is called ListAll, When clicking on ListAll, I want to display all the records grouped by na ...

javascriptcssvue.jsvuejs2flexboxgrid

Adjust the header and menu color as you scroll

Starting fresh with JavaScript, I'm seeking advice on a specific piece of code. Working on a Joomla 3.2 website using the Gantry template by default. My goal is to achieve the following: When a user accesses a submenu (e.g., 01, 02, 03) derived from t ...

jqueryhtmlcss

Adjusting the position of an element when the width of its parent div shifts

Struggling with the challenge of absolute and relative positioning in CSS. My GUI allows users to view folders and select how many columns they appear in, as shown in the images provided. Beneath each folder is an input field for renaming and a clear butto ...

htmlcssangularjs

Tips for arranging letters on separate lines using CSS

I have a set of four divs that display numbers, and I want to show the corresponding words below each number. Despite trying to use the p tag with white-space: pre; in CSS, I have not been successful: #c { padding-top: 30px; padding-bottom: 30px; } ...

htmlcss

Utilize CSS to specifically target the image source within a button and swap it with a different image in the Woocommerce Wishlist Plugin on your Wordpress

I have integrated the Woocommerce Wishlist plugin into my Wordpress website and I am looking to customize the appearance of the 'Add to Wishlist' button. Upon inspecting the source code, I noticed that the button is styled with a GIF image. I wou ...

htmlcsswordpressimagewoocommerce

When you hover over them, Material UI icons shrink in size due to the Border

I've been working on a React application that includes Material UI icons in the header. My goal is to add a border at the bottom of each icon when hovered over, but currently, the borders are too close to the icons. Another problem I'm facing is ...

javascripthtmlcssreactjsmaterial-ui

Manipulating the Datepicker onChangeMonthYear event in Jquery UI

I am currently working on customizing the appearance of specific dates within a jQuery UI datepicker. If a date is considered a holiday (meaning it matches a date in an array of specified holiday dates), I want to remove the default styling and make some m ...

jqueryhtmlcssjquery-uidatepicker