mobile version of website

Beaver Builder
1

Hello,
This is the site, I have added the code
below to the logo & menu

.fl-node-56e098dce7c28 {width: 600px;}

as well as the code below to the text below the main image

.fl-node-56e091a9512ec {width: 600px;}

as I wanted them to align with the main image but when you view it on mobile it is
not centered. I don’t want to make the image any larger.
Thanks

2

Hey Pauline,

Try wrapping your code in media queries so it only applies on large devices. The default small medium breakpoint set on the plugin is 768px so we’ll use that.

@media (min-width: 768px) {
  .fl-node-56e098dce7c28 {
    width: 600px;
  }
  .fl-node-56e091a9512ec {
    width: 600px;
  }
}

Give it a shot and let us know how it goes! :slight_smile:

Ben

3

Ben,
Thanks for your reply. I am using the genesis child theme, added the code to @media only screen and (max-width: 1200px) as well as @media only screen and (max-width: 960px).
I went to g.co/design/resizer(google resizer) to view the website in different devices, when
viewed on the phone & larger screen the logo/menu & text under the image is not in line with photo. I tried using 3 columns for header/logo, image & text to see if it will align, alas it didn’t

4

Hey Pauline,

That’s because you’re using max-width. It means the CSS will apply when the width of the viewport is <= 960px. You’ll want to apply the styling only when the viewport width is >= 960px so you’ll want to use min-width. :slight_smile:

Ben

5

Hi Ben,
Have changed max-width to min-width, am not sure if this problem has to do with the theme or the plugin, when you view this page on the mobile the text goes right up to the edge even though I have added margin of 10px in the text editor settings, which I have since deleted. I also added padding: { 10px 15px 0 90px; } in the row settings but the text still goes right up to the edge.
thanks & much appreciated.

6

Hi Pauline,

Can you provide a screenshot of the padding settings you have added, please? As I am not seeing any margin or padding when I view your module.

Alternatively, I see you have added a <div id="about"> that contains the text for the about page. You could use the following CSS to give the text some padding.

#about {
  padding: 40px;
}

Thanks,
Danny

7

Danny,
I deleted the margins & paddings which is why you are not seeing it.
How would I go abut fixing this on the mobile as the text is right up to the edge.
This is what I did under global settings global settings. I left the responsive layout as it was under the global settings.
Thanks

8

Hey Pauline,

The reason why those values aren’t working is because you have auto spacing enabled. Here’s how it works - When Auto Spacing is enabled we reset the left/right padding for rows and columns and all margins for rows, columns, and modules to the values set in the global settings.

Since your global settings are set to 0, the left/right padding and all margins are set to 0. Try setting the global row padding to 15px and see if it’s what you’re looking for. :slight_smile:

Ben