Centering an image with media query breakpoint - sounds simple - heeeeelp!?!

Centering an image with media query breakpoint - sounds simple - heeeeelp!?!
0

#1

Hi,

I created this page back to front starting at desktop size - paying for it now!

My media query begins at max-width: 680px. At this break point I am trying to make the content basically block level and stack.

I cannot work out how to center my images. I’ve been experimenting with the CSS code around line 222 but I cannot get it to work. I think I must be missing something fundamental. I recognize that I should have built my site from mobile upwards but I’m trying to backward engineer it!!

I’ve tried creating a div but when the screen size goes beyond the break point the image stays on its own line.

The other issue I don’t understand is why the sub-heading which is in the line of code below the img src file appears above the image on resizing. Its wrapping somehow but cannot see how to make the image block so this doesn’t happen.
I’d appreciate if anyone had the time to look at the code as I have spent ages looking online to try to solve it. Thank-you :slight_smile:

code https://github.com/MatWard/yoga-option

page https://matward.github.io/yoga-option/


#2

i wouldnt be the best but do see on line 145 you have a css rule #chakra {float:right;} when the width is less than 680px if you clear that float when in the developer tab …your sub heading drops below image and your image moves to the left. So if you try getting rid of that and maybe put that into your media query for above 680 might help out.


#3

Hi John,
thanks for your reply. Your right that it clears the problem when at smaller problems.

I was looking CSS line 145. But I needed that float to get the #chakra image to float right and for the text to wrap in the larger layout.
If I remove that then the #chakra image takes up a whole line - not what i want on the larger size.
I’m unsure of what to do unless you can think of any ways around it.


#4

ok another bit that helps drop the sub heading … i tried adding a div around your image …
give it a class or id … then in media queries give it … width 100% and float right … this makes the sub heading drop below when the window is sized down … unfortunately image is still not centered nicely until down to phone screen sizes. other than that i dont have enough experience to help further … Im very new to media querys but do realize whats going wrong as i have started my profile page challenge using them and started from small size up to avoid whats happened to you.

i use brackets and it highlights a couple of syntax errors … you have a section tag at line 60 but you have two closing section tags one at around 71 and another at around 175 … and a closing p at around 158 that showing as having no start p


#5

Ok also have a look at this and see if it helps … being doing a little reading and practice and have a paragraph that is on the left when large screen but use a media query then to have it under the image when screen reduced. Think it should help. Click edit on codepen and drag the screen narrower to see it work


#6

Hi John. Thanks for looking at this.
I’m out all day but will look later tonight when I’m back.
Much appreciated :thumbsup:


#7

Ok got it sorted similar to what i posted above … but made another couple of changes as when i based your page on above fix i hit a problem with the list not shifting up so had to remove the css for that (wasnt a problem in codepen) Anyway i can post a codepen with your html and css code here (without images just tags you can copy the html and css to new index file css file and run to see if it suits. Or i can message you the link to the codepen.
just go through the code carefully not much changed in html …added a div before img and closed it just before the header Hata Yoga. most of the changes were in the css as had to change @medi (max-width to min-width so as well as adding a couple of css rules i also had to reverse a couple you had plus remove the css that affected the list.

ok tried using git so heres a link https://github.com/JohnL3/yoga-option/tree/JohnL3-patch-1
Not overly familiar with git yet need more practice so i just basically forked your git and pushed a edited copy back into my repository …


#8

Hi John,
Struggling with github! Tried to view your fork in a browser but only thing I can see is my original so cannot view the changes.
I need to learn github a little better!!!