# mobile version of website **URL:** \ **Category:** Beaver Builder\ **Created:** [March 10, 2016, 7:40am UTC](https://community.wpbeaverbuilder.com/t/mobile-version-of-website/7593 "2016-03-10T07:40:46Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![webgirl20](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/w/ebca7d/32.png) [@webgirl20](https://community.wpbeaverbuilder.com/u/webgirl20)\ **Post date:** [March 10, 2016, 7:40am UTC](https://community.wpbeaverbuilder.com/t/mobile-version-of-website/7593/1 "2016-03-10T07:40:46Z")
Hello, This is the [site](http://www.excelpros.co.uk), 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 ---
**Author:** ![bencarlo](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/bencarlo/32/287_2.png) [@bencarlo](https://community.wpbeaverbuilder.com/u/bencarlo)\ **Post date:** [March 10, 2016, 9:30am UTC](https://community.wpbeaverbuilder.com/t/mobile-version-of-website/7593/2 "2016-03-10T09:30:22Z")
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. ```auto @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! 🙂 Ben ---
**Author:** ![webgirl20](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/w/ebca7d/32.png) [@webgirl20](https://community.wpbeaverbuilder.com/u/webgirl20)\ **Post date:** [March 16, 2016, 8:16am UTC](https://community.wpbeaverbuilder.com/t/mobile-version-of-website/7593/3 "2016-03-16T08:16:14Z")
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](http://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 ---
**Author:** ![bencarlo](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/bencarlo/32/287_2.png) [@bencarlo](https://community.wpbeaverbuilder.com/u/bencarlo)\ **Post date:** [March 16, 2016, 10:58am UTC](https://community.wpbeaverbuilder.com/t/mobile-version-of-website/7593/4 "2016-03-16T10:58:46Z")
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. 🙂 Ben ---
**Author:** ![webgirl20](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/w/ebca7d/32.png) [@webgirl20](https://community.wpbeaverbuilder.com/u/webgirl20)\ **Post date:** [March 29, 2016, 7:13am UTC](https://community.wpbeaverbuilder.com/t/mobile-version-of-website/7593/5 "2016-03-29T07:13:23Z")
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](http://www.excelpros.co.uk/about) 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. ---
**Author:** ![Danny](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/danny/32/3451_2.png) [@Danny](https://community.wpbeaverbuilder.com/u/Danny)\ **Post date:** [March 29, 2016, 3:08pm UTC](https://community.wpbeaverbuilder.com/t/mobile-version-of-website/7593/6 "2016-03-29T15:08:18Z")
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 `
` that contains the text for the about page. You could use the following CSS to give the text some padding. ```auto #about { padding: 40px; } ``` Thanks, Danny ---
**Author:** ![webgirl20](https://community.wpbeaverbuilder.com/letter_avatar_proxy/v4/letter/w/ebca7d/32.png) [@webgirl20](https://community.wpbeaverbuilder.com/u/webgirl20)\ **Post date:** [March 30, 2016, 6:07am UTC](https://community.wpbeaverbuilder.com/t/mobile-version-of-website/7593/7 "2016-03-30T06:07:33Z")
Danny, I deleted the margins & paddings which is why you are not seeing it. How would I go abut fixing [this](http://wp-ng.com/staging/mobile.jpg) on the mobile as the text is right up to the edge. This is what I did under global settings ![global settings](http://wp-ng.com/staging/globalSettings.jpg). I left the responsive layout as it was under the global settings. Thanks ---
**Author:** ![bencarlo](https://community.wpbeaverbuilder.com/user_avatar/community.wpbeaverbuilder.com/bencarlo/32/287_2.png) [@bencarlo](https://community.wpbeaverbuilder.com/u/bencarlo)\ **Post date:** [March 30, 2016, 11:10am UTC](https://community.wpbeaverbuilder.com/t/mobile-version-of-website/7593/8 "2016-03-30T11:10:51Z")
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. 🙂 Ben ---
**Author:** ![system](https://community.wpbeaverbuilder.com/uploads/default/original/2X/9/9db1b183a7ea1efa26199a2a2b3511d742473dae.png) [@system](https://community.wpbeaverbuilder.com/u/system)\ **Post date:** [April 27, 2019, 10:22pm UTC](https://community.wpbeaverbuilder.com/t/mobile-version-of-website/7593/9 "2019-04-27T22:22:59Z")