• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

automate margin on one side to be removed when at mobile breakpoint

Enthusiast ,
Sep 20, 2018 Sep 20, 2018

Copy link to clipboard

Copied

Hi,

What is the best way to approach this without having to re-write media query styles for mobile breakpoints?

Example: img floating left within a div with text to the right of it. The text wraps to create a paragraph wherever it hits the img. I had to add margin-right to the image so the text & image had a decent gap between.

However, once this gets to mobile, that excess margin-right will no longer be needed as the single col will display this image and all the text collapsed underneath it. The image will need to be 100% centered at that point.

Is there a better approach for this to better automate details like this?

Thank you.

Views

753

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Sep 20, 2018 Sep 20, 2018

Copy link to clipboard

Copied

Another example. Similar thing. Button is set to 50% of its container for desktop. Once it collapses to mobile, it needs to be 100% and centered in the single col. - Am I expected to write media queries for all such details? Again, is there something I am missing that requires less effort?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 20, 2018 Sep 20, 2018

Copy link to clipboard

Copied

r_tist  wrote

Am I expected to write media queries for all such details?

Yes. There's is no other way if you want either to get rid of a css attribute or add one.........short of not doing it at all, which a lot of developers seem to do if you look at their mobile layout efforts. It can be tedious work if you are not organised or familiar with how to do it but its quite quick once you get the feel for it.

One tip is to keep all your styling together in your css stylesheet. It makes for easy management. If you keep the css styling altogether and in order you have a good snapshot of what your container/element is doing at various breakpoints. If you splash them about all over the place it will make life more dificult......good managemnet is key when it comes to web-development otherwise you will find yourself with your nose in browser developer tools all day rather than doing any developing. I rarely need the browser development tools as Im organised and write my own code.

/* Desktop */

.wrapper {

width: 75%;

font-size: 20px;

background-color: red;

}

/* Tablet */

@media screen and (max-width:768px) {

wrapper {

width: 90%;

}

}

/* Smartphone */

@media screen and (max-width:480px) {

wrapper {

width: 100%;

}

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 20, 2018 Sep 20, 2018

Copy link to clipboard

Copied

At the risk of getting flamed for herecy,  I'll just say that Bootstrap 4x has conveniently added spacing utilities to handle these situations.  You can selectively add margins or padding classes to elements based on viewport size (xs, sm, md, lg, xl).   No extra CSS media queries required. 

https://getbootstrap.com/docs/4.1/utilities/spacing/

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 21, 2018 Sep 21, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/Nancy+OShea  wrote

At the risk of getting flamed for herecy,  I'll just say that Bootstrap 4x has conveniently added spacing utilities to handle these situations.  You can selectively add margins or padding classes to elements based on viewport size (xs, sm, md, lg, xl).   No extra CSS media queries required. 

https://getbootstrap.com/docs/4.1/utilities/spacing/

I guess that depends if you like bunging up the html code with extra classes, personally I dont and cannot offer using Bootstrap as a serious option, unless you dont care about the code of course or not even aware of it. You dont need Bootstrap either to create these extra classes.

Im closely following another forum at the moment and some of the code being produce in that is horrid/horrendous. Some bloke put an app together and all the js stuff is mingled in with the html code, no wonder the developers of that program (the same company as in the video Ben posted) dont really want you to code, more they dont want you to see it more like. Another says it can do what vue, react and angular can do....well at least those frameworks are a bit more organised in the way they produce their functions, done properly.

Im not buying into this fill the html with as many directives, classes as humanly possible - it's just a dirty and nasty way of working. Throw in Bootstrap bloat and you have a really awful html. I would not want to be troubleshooting a page like that to be honest, to me it takes me back to the bad old days of <div> soup or endless table tags, when it all looked a horrid mess.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 21, 2018 Sep 21, 2018

Copy link to clipboard

Copied

osgood_  wrote

Im closely following another forum at the moment and some of the code being produce in that is horrid/horrendous. Some bloke put an app together and all the js stuff is mingled in with the html code, no wonder the developers of that program (the same company as in the video Ben posted) dont really want you to code, more they dont want you to see it more like. Another says it can do what vue, react and angular can do....well at least those frameworks are a bit more organised in the way they produce their functions, done properly.

Image result for spy

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 21, 2018 Sep 21, 2018

Copy link to clipboard

Copied

At least I can't get accused of not keeping up-to-date with current workflows being used. The more you know the better positioned you are to make a comment.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 21, 2018 Sep 21, 2018

Copy link to clipboard

Copied

Sorry for the late reply, had to watch my team, the Magpies, win the semi-final. Beat last year's premiers.

As far as that other program is concerned, I view it as Dreamweaver with DMXzone extensions on steroids.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 21, 2018 Sep 21, 2018

Copy link to clipboard

Copied

what sports ?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 21, 2018 Sep 21, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

what sports ?

That looks like Aussie rules football........always look like they are dressed to play basketball

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 21, 2018 Sep 21, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

what sports ?

As osgood_​ has already stated, Aussie rules which can be likened to Gaelic football played with an oval ball. It is a contact sport.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 22, 2018 Sep 22, 2018

Copy link to clipboard

Copied

  wrote

https://forums.adobe.com/people/B+i+r+n+o+u   wrote

what sports ?

As   has already stated, Aussie rules which can be likened to Gaelic football played with an oval ball. It is a contact sport.

In the US, we call it Rugby.

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 22, 2018 Sep 22, 2018

Copy link to clipboard

Copied

https://forums.adobe.com/people/Nancy+OShea  wrote

In the US, we call it Rugby.

We also have Rugby, but that is slightly different to Aussi Rules.

Aussi rules started out as a game of keep-ems-off  for cricketers in the off-season. This entailed having to keep a Rugby type ball in possession of the team for as long as possible. From there, rules developed forming our current game. The only remaining relic is the 'footy oval' which has the shape of a cricket field. It has two goal posts and two behind posts at either end.

For more see Australian rules football - Wikipedia 

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 23, 2018 Sep 23, 2018

Copy link to clipboard

Copied

LATEST

I've never heard of it... so thank you for pointing out this sport and making it known.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 21, 2018 Sep 21, 2018

Copy link to clipboard

Copied

as we are... stay tuned

L’image contient peut-être : texte

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 21, 2018 Sep 21, 2018

Copy link to clipboard

Copied

BenPleysier  wrote

As far as that other program is concerned, I view it as Dreamweaver with DMXzone extensions on steroids.

Apart from it isnt - at least DW handles Bootstrap 3 and is a far better actual 'code' editor

W has its appeal If you dont care much about what code is produced, that's the down-side but if you're a small business or maybe in the twilite of your career and need to flip out sub-standard produce then its probably a very good fit. Have you just seen the recent roll-out. On the surface it looks good but look closer - the table sorting code is particulary spaghetti........humm

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Enthusiast ,
Sep 21, 2018 Sep 21, 2018

Copy link to clipboard

Copied

OK, great. Just wanted to be sure nothing has changed as I have been going to town writing several media queries over and over for each breakpoint and it is rather time consuming.

What is this 'wrapper' piece you use for the key breakpoints? Is that a short-cut (a 'global' helper / support method) to help minimize the amount of media queries you'd otherwise need to individually write for each & every element?

Tell me more! I am interested in learning new techniques. I used to use the wrapper before my Bootstrap days when things were static, but thought it became somewhat extinct.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 21, 2018 Sep 21, 2018

Copy link to clipboard

Copied

r_tist  wrote

What is this 'wrapper' piece you use for the key breakpoints? Is that a short-cut (a 'global' helper / support method) to help minimize the amount of media queries you'd otherwise need to individually write for each & every element?


This statement is a bit concerning. You shouldn't need to write a media query for each element. A media query is typically created for a "break point", when your design falls apart and you need to use slightly different css rules to control it. You place all of the css that needs to be changed within a media query.

For example:

@media only screen and (min-width:300px) and (max-width:600px) {
     .all-rules {

          for_that:range;
          go:here;

     .for-all {

          items:that-need-it;

}

}

Essentially, each media query will act as a separate external css file that only kicks in then the conditions are met. You definitely shouldn't be writing a new media query for each element that changes as you go. That would be extremely tedious.

If you're using % widths to keep your pages fluid, and media queries to change the css of elements when the design breaks at given screen sizes, you should really only ever need maybe 2-3 media queries in your css document.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Sep 21, 2018 Sep 21, 2018

Copy link to clipboard

Copied

r_tist  wrote

OK, great. Just wanted to be sure nothing has changed as I have been going to town writing several media queries over and over for each breakpoint and it is rather time consuming.

What is this 'wrapper' piece you use for the key breakpoints? Is that a short-cut (a 'global' helper / support method) to help minimize the amount of media queries you'd otherwise need to individually write for each & every element?

Tell me more! I am interested in learning new techniques. I used to use the wrapper before my Bootstrap days when things were static, but thought it became somewhat extinct.

The wrapper is just an example of an element on your page. For smart-phone you might want to add a 50px top margin so you can do that in the smart phone media query - see below (or use a Bootstrap helper class if you can find one for 50x top margin. (Bootstrap tends to be a bit less discerning about sizing but it will do for some)

.wrapper {

width: 75%;

font-size: 20px;

background-color: red;

}

@media screen and (max-width:768px) {

wrapper {

width: 90%;

}

}

@media screen and (max-width:480px) {

wrapper {

width: 100%;

margin: 50px;

}

}

The point is you ONLY need to include the css attribute/s that need to be changed in the media query. Ive seen people who just duplicate the whole block of css as below but 'font-size' and 'background-color' is redundant in the smart-phone media query because they have already been declared in the desktop css.

.wrapper {

width: 75%;

font-size: 20px;

background-color: red;

}

@media screen and (max-width:480px) {

wrapper {

font-size: 20px;

background-color: red;

width: 100%;

margin: 50px;

}

}

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 20, 2018 Sep 20, 2018

Copy link to clipboard

Copied

Co-incidentally, I have just finished watching Building a Page Layout with Bootstrap 4 - YouTube which more or less touches on the subject.

All of the instruction videos making life a lot easier for users of Dreamweaver can be found at DMXzone - YouTube

Warning: these are commercial extensions for Dreamweaver.

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines