This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

Customize margin-bottom on smartphone

Resolved 11 replies customizationpluginplugin-page-builder
Alpine Lodges
10 years ago · Last reply by Support Assistants 10 years ago

Hello,

I try to customize the div on smartphone:

media (max-width: 780px)
# pgc-1497-0-0, # pgc-1497-0-1, # pgc-1497-0-2, # pgc-1497-1-0, # pgc-1497-1-1, # pgc-1497- 1-2 {
     margin-bottom: 30px;
}

But I do not know how to remove the margin by default on smartphone how I should do?

Thank you

My website : http://savoyroche.com/property/thoiry-ferme-2/

Justine

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

11
  1. Support Assistants 10 years, 2 months ago

    Hi Alpine Lodges

    The correct formatting of the CSS rule you pasted would be:

    @media (max-width: 780px) {
	#pgc-1497-0-0, #pgc-1497-0-1, #pgc-1497-0-2, #pgc-1497-1-0, #pgc-1497-1-1, #pgc-1497- 1-2 {
	     margin-bottom: 30px;
	}
}

    Give that a try.

  2. Alpine Lodges 10 years, 1 month ago

    Hello,

    This code does not seem to fit, I think that the code is :

    media (max-width: 780px) {
# pgc-1401-0-0, # pgc-1401-0-1, # pgc-1401-0-2, # pgc-1401-0-3, # pgc-1401-1-0, # pgc-1401- 1-1, # {pgc-1401-1-2
margin-bottom: 0px;
}
}

    No ?

    I added this code in the editor page builder “edit row”> “css rules”, but it does not work, see the screen shot: http://savoyroche.com/screenshot.png

    Thank you for your help

  3. Support Assistants 10 years, 1 month ago

    Hi :)

    media rules need to start with an @.

    http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

    However, the method you’re trying to change this bottom margin (using Row Attributes), unfortunately, isn’t suitable and won’t work.

    Have you tried editing each row by clicking the wrench icon and then Edit RowTheme and enabling No Bottom Margin?

    Thanks for your patience, we’ll definitely be able to resolve.

  4. Alpine Lodges 10 years, 1 month ago

    Hello,

    I just forget the @ when I published the post…

    I do not know if I understood, I indicated in the corresponding field : 0px to “bottom margin” in edit row> layout> bottom margin is this?

    Because it does not change on smartphone, that’s the same thing

    Thank you for your help

  5. Support Assistants 10 years, 1 month ago

    The No Bottom Margin setting will apply the same row bottom margin 0 value for both desktop and mobile.

    If you send the URL you’re working on and let us know the mobile result you’ll trying to achieve, we can try help.

  6. Alpine Lodges 10 years, 1 month ago

    Thank you, I send you the url :
    http://savoyroche.com/property/chevry-architectural-design/
    It works ! but on the smartphone top (email a friend, pdf), the elements do not set properly how I could improve this?

  7. Alpine Lodges 10 years, 1 month ago

    I add a contact form that does not display correctly on smartphone (it is inserted with an editor widget) see link: http://savoyroche.com/contact/
    How should I do ?

  8. Support Assistants 10 years, 1 month ago

    Hi Alpine Lodges

    You can fix/change this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.

    @media(max-width:780px) {
	#panel-1401-0-1-0 p[style]{
		text-align: left !important;
	}
}

    You might also need to install the SiteOrigin CSS Editor.

  9. Support Assistants 10 years, 1 month ago

    I’m not certain the mobile contact form issue relates to Page Builder. Try the form in a regular page that isn’t using Page Builder and see if the mobile issue persists.

  10. Alpine Lodges 10 years, 1 month ago

    Thank you for your help !

    I will contact the contact form plugin support 7.

  11. Support Assistants 10 years, 1 month ago

    All the best :)

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread