Revamping CSS for a Responsive Wordpress Tesseract Theme

I'm currently in the process of developing a website using the Tesseract theme at thevandreasproject.com. However, I have encountered an issue with responsiveness when integrating the SiteOrigins PageBuilder plugin. The compatibility between PageBuilder and certain plugins like spacers and GoogleFonts seems to be causing the problem.

After conducting some research, I came across others facing similar challenges (refer to: ). It appears that the solution involves custom CSS targeting for each row. Even after removing the spacers and GoogleFont controls, the rescaling issue persists. On the Home page of my site, I am utilizing CSS to adjust the background image and header text for proper positioning:

@media (min-width: 680px) {
    .custom-home-background .textwidget .home-headline{
        margin-top: 40px;
        margin-bottom: 450px;
        font-size: 60px;
        font-family: 'Roboto';
        font-weight: 500;
        letter-spacing: 10px; 
     }
}

While the appearance is satisfactory on my desktop screen, it fails to display correctly on my iPhone. Additionally, I am struggling to make the MangoButtons plugin responsive as well. Any suggestions or assistance would be greatly welcomed!

Thank you

csswordpresstesseract

Answer №1

After dedicating numerous hours, I have finally cracked the code and delved into the world of CSS coding :)

@media (min-width: 680px) {
    .home-background .textwidget {
        font-size: 50px;
        font-style: normal;
        font-weight: 500;
        letter-spacing: 8px;
        font-family: 'Roboto';
        min-height: 880px;
        padding-top: 20px;
    }   

}

@media (max-width: 679px) {
        .home-background .textwidget {
                padding-top: 20px;
                padding-bottom: 175px;
                font-style: normal;
                font-weight: 500;
                font-family: 'Roboto';

    }

.site-content {
        height: 0!important;
 }
#footer-banner {
   padding:50px;
    }
}

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 Firefox the only browser where the webpage is displayed off-center?

I've encountered a strange issue with my website that I can't seem to figure out. Despite searching extensively on Google and Stackoverflow, I haven't come across anyone else facing the same problem. During testing in different browsers lik ...

htmlcss

Encountering a peculiar problem with the Bootstrap Carousel where the first slide fails to load

There seems to be an issue with the bootstrap carousel where the first slide appears empty initially, but once you slide to the second slide it starts working fine. Navigating through all slides is still possible. <div id="mediakit_carousel" class="car ...

javascriptjqueryhtmlcsstwitter-bootstrap

Position of fixed div set relative to its parent fixed div

I'm facing an unusual situation where I need a fixed div to be positioned relative to its parent, which is also a fixed div. When you take a look at my example, everything will become clear. <div class="drawer"> <p>Drawer</p> & ...

htmlcss

Issue with Masonry grid display not functioning correctly following the addition of more posts using ajax loading

Currently, I am utilizing this technique to load additional posts through Ajax. In addition, I have implemented Masonry for the layout of the posts. While Masonry works smoothly for the initial batch of posts, it encounters issues with subsequent sets th ...

ajaxwordpressmasonry

Evolving fashion trends

I'm looking to dynamically change the style of my HTML element based on screen size, similar to this example: <p [ngStyle]="{'color': isMobile() ? 'red' : 'blue'}">Lorem Ipsum</p> The code above triggers a m ...

htmlcssangulartypescript

What is the best way to generate multiple progress bars by leveraging a for loop?

Exploring the code snippet below, I've been creating a progress bar that reacts to specific data input in array form. However, the issue I've encountered is that the code only generates a single progress bar. How can I incorporate this into my f ...

javascripthtmlcssfor-loopprogress-bar

Unable to locate a selenium-recognized element within this field

I've attempted to use FindElementByName but I keep getting a no such element error when it should recognize this name. What am I overlooking? This issue is occurring on the website Intacct.com. Despite my efforts, I have been unable to find a unique C ...

cssexcelvbaseleniumweb-scraping

Can a class be passed to the binding attribute in Angular framework?

We currently have a system in place that is dependent on a numeric value being set to either 1 or 2 in order to display specific icons. This method is functional. <span *ngIf="config.icon" [class.fas]="true" [class.fa-plus]="icon===1" ...

cssangular

An SVG with a single enigmatic path/shape featuring a perplexing left margin or empty space. Not contained within an

I created a unique shape in Illustrator and adjusted the artboard to fit the shape perfectly, eliminating any excess white space. I double-checked this process to ensure accuracy. Upon opening the design in Chrome and inspecting it, I noticed that when ho ...

csssvg

Tips for positioning icons inserted using the :before method

Is there a way to center align an icon added using the :before method? Below is the current code snippet: <div class="button submit"> <a class="submit check_car_search" href="#" >Some Text</a> </div> CSS: .button a{ backgr ...

htmlcss

Why does React-Perfect-Scrollbar not work properly when the height of an element is not specified in pixels?

Currently, I am developing a chat application with React 18 for its user interface. The app includes a sidebar that displays user profiles. To ensure the app fits within the browser window height, I've made the list of user profiles scrollable when n ...

javascriptcssreactjsjsx

Unable to center label when adjusting TextField height beyond default

I was tasked with reducing the size of the MUI Component TextField by 4px. To achieve this, I modified the root & .MuiOutlinedInput-input. Although it adjusted the height as desired, the label (Email) is no longer vertically centered. I attempted to so ...

cssreactjsmaterial-ui

CSS Table Style Chaos

When styling a table using CSS, I encountered this line within the code: .pricing tr td:last-child { text-align: right; } This particular line ensures that the text in the last column of the table aligns to the right. The class "pricing" is applied to th ...

htmlcsscss-tables

Conceal the unstyled element and reveal its adjacent sibling?

I have come across some HTML code that I am unable to modify. Instead of using JS/jQuery, I prefer a solution with cross-browser compatible CSS. The structure of the HTML is as follows: <ul class="list"> <li class="item"> <a hr ...

htmlcsshtml-lists

Regex: Identifying all URLs except for those with ".js" or ".css" included

I am currently working on a project where I need to change all the links in an HTML page so that they are not clickable. However, I am having trouble finding the right Regex pattern for the following condition: href="Any_URL" except for those that contain ...

phphtmlcssregex

Imitate the actions of images with {width: 100%; height : auto} properties

I am interested in creating a unique layout that consists of a stripe composed of images with varying widths and heights. These images need to be proportional, scaled at the same height, and collectively have a width equal to the parent element. However, ...

htmlcss

List that spans the entire width of the browser, with text limited to a maximum width

I've encountered an issue with a full-width list in my browser. It has a background color that changes when hovered over. However, I want the text within each li element to have left-aligned alignment, a maximum width, and equal left and right margins ...

htmlcss

Locate a specific class inside a div and switch the CSS style to hide one element and reveal another

I have two divs, each containing a span. By default, the display of each span class is set to none. My goal is to toggle the display property of the span within the clicked div. If the span is already visible, I want to hide it; if it's hidden, I want ...

javascriptjqueryhtmlcss

How you can fix the issue of the "Element not visible" error occurring specifically for one element within the popup

Error Message: "Element Not Visible" when Script Reaches Last Element Despite all attributes being in the same form, an error occurs when the script reaches the last element and displays "element not visible." All elements are enclosed in div tags on the ...

javascriptjqueryhtmlcssselenium

I seem to be encountering a z-index dilemma

Is there a way to make my slogan float above an image on a wide screen? I've tried adjusting the z-index without success. You can find the site here: Here is the CSS code: The #Slogan contains the words: Fitness Bike Guides - Top Models - Discount ...

css