Background goes missing on hero pattern in mobile only

at the top of the page the first section i created by directions from AI. The buttons i made gradients and now those as backgrounds are not showing up either as you can see.

Step 1: Insert the Outer Container (Full Width)
1. In your WordPress editor, click the + (Add Block) button and select Container [index:0.6.2]. This is your Outer Container.
2. Look at the right sidebar under the Spacing panel:
• Padding: Add padding to the top and bottom (e.g., 80px Top, 80px Bottom) to give the section breathing room.
• Add a small amount of left/right padding (e.g., 20px Left, 20px Right) so your content doesn’t mash against the edge of mobile screens.
3. Note on Width: By default, GenerateBlocks containers inherit your theme’s full width or content area. Do not set a max-width on this outer box.
Step 2: Drop in the Inner Container (Max 1300px)
1. Click inside your Outer Container to activate it.
2. In its floating toolbar directly above the block, click the Add Inner Container icon (it looks like a box inside a dashed box). This places a perfectly nested second container inside.
3. Select this new Inner Container and look at the right sidebar:
• Sizing Panel: Find Max Width and type in 1300px.
• Spacing Panel: Go to Margin and set both Left and Right to auto. (Setting left/right margins to auto is the standard layout rule to keep your 1300px box perfectly centered on large screens).
Step 3: Configure the Layout (The Secret to Responsiveness)
Instead of relying on margins to separate your elements, use Flexbox on the Inner Container to manage layout hierarchy dynamically.
1. With the Inner Container still selected, open the Layout panel in the right sidebar.
2. Change Display from Default to Flex.
3. Set Direction to Column (this forces your image, text, and buttons to stack vertically).
4. Set Align Items to Center (if you want everything centered) or Flex-start (if you want everything left-aligned).
5. Look for Row Gap and set it to 24px (or 1.5rem). This automatically adds equal spacing between every block you insert next, preventing layout collapse on mobile.
Step 4: Add the Content Elements
Click the + inside your Inner Container and add your elements in this exact order:
1. Image: Add a GenerateBlocks Image block [index:0.6.2]. Upload or select your media. Under its Sizing panel, make sure Max Width is set to 100% so it automatically shrinks on smaller viewports.
2. Heading: Add a GenerateBlocks Headline block [index:0.6.2]. In the toolbar, ensure it is set to H1 or H2 and type your title.
3. Subheading: Add another GenerateBlocks Headline block [index:0.6.2]. In the right sidebar under Element Type, change it from a heading tag to a Paragraph (p) tag, then adjust its font size to be smaller than the heading.
4. Buttons Wrapper Container: Add a third Container block below your subheading to hold your buttons.
• In its Layout panel, set Display to Flex and Direction to Row (so they sit side-by-side on desktop).
• Set Column Gap to 16px to keep space between them.
• Insert your three individual GenerateBlocks Button blocks inside this wrapper [index:0.6.2].
Step 5: Optimize the Buttons for Mobile
While the rest of the layout is already naturally responsive, three side-by-side buttons will likely overflow a mobile screen.
1. Select the Buttons Wrapper Container (the parent of the three buttons).
2. At the very top of the right styling sidebar, toggle the device icon view from Desktop to Mobile.
3. With the mobile view active, go back down to the Layout panel:
• Change Flex Direction from Row to Column.
• Change Align Items to Stretch (if you want full-width mobile buttons) or Center.
• Add a Row Gap of 12px so they don’t clip into one another vertically.

Look at the link on desktop then mobile are you seeing everything am i the only one seeing the backgrounds gone?