CSS not 100% work for responsive mode on Detail-Page

By: Susan S. | Asked: 10/06/2024
ForumsCategory: General questionsCSS not 100% work for responsive mode on Detail-Page
Susan S. asked 3 months ago

Good day, I can't get any further, I've tried everything but the detail page is always displayed as responsive even though I open the page on my PC or laptop. First of all, I would like to say that I am working in the grid view via Layout Builder, not Classic. I would like to have the following. I want to see 8 table columns on desktop, but only 3 columns in responsive. What's a bit confusing is the fact that despite the CSS adjustment, the grid style settings still play a role. In CSS I have instructed 8 columns to show in desktop and 3 in responsive. This only works if I use the slider Number of grid columns
to 6 place. Strangely enough, 10 columns are shown in the preview. The frontend actually shows the 8 columns I want.
And it even works responsively on mobile phones with just 3 columns. But now the detail page is always displayed responsively. I've already changed everything imaginable. I can't find a solution.
Of course, I only want to display responsive detail pages on mobile phones and the normal desktop version on the PC.
As mentioned, the grid view is displayed as desired.
But something is wrong with formidable because the Number of Grid generally shows incorrect table numbers, even without CSS!   /* Desktop Grid-Layout nur für die Listingpage */
.frm_grid_container {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 10px;
} /* Mobile Ansicht nur für die Listingpage */
@media (max-width: 768px) {
.frm_grid_container {
grid-template-columns: repeat(3, 1fr);
}
} /* Standardlayout für die Detail-Page */
.####### {
display: block; /* Oder 'flex', je nach Layout */
max-width: 1200px; /* Beispiel für eine maximale Breite */
margin: 0 auto; /* Zentriert die Seite */
padding: 20px; /* Innenabstand */
}
/* Sicherstellen, dass keine mobilen Regeln die Detail-Page beeinflussen */
@media (max-width: 768px) {
.######## {
display: block; /* Oder eine spezifische Darstellung */
}
} _____________________ I used the # symbol because I tried all sorts of classes and none worked. I can't find the class! can someone help me here? Best regards susan  

 

PS.:
Oh, I would also like to mention that I have activated Elementor and am using it.

Attachments
Susan Schorstädt replied 3 months ago

In settings, manage styles I have set up so far: on every page of my website. When I change things, everything doesn't look nice!

Victor Font replied 3 months ago

The problem is that you are not targeting your specific form's grid. You are using generic CSS classes that change everything across Formidable. You are overriding Formidable's styling, but not in the right way.

You've been struggling with this for days and asking for help from a community of volunteers. The changes you need appear to be above your skill set, perhaps you should consider hiring a developer to help you. You need someone to physically look at what you are doing on your machine because your CSS needs to be targeted to the specific elements you are trying to change.

Please visit https://formidable-masterminds.com/developers-directory/ to find a developer to help you.

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right