Hello everyone. I am new to mobile website CSS and I can’t seem to figure out how to code it. Currently, I’m working on a website. Since I am fairly new to PHP language as well, I used whatever I’ve learnt to code the site.
The problem with the site is it looks fine on big screens like laptops and desktops. I’ve used the code @media only screen and (max-width: 1000px) to configure the small screens like a phone. It is working fine on my iPhone XS Max. However, on my Huawei P20, the alignment is off. I’ve attached a photo of the problem on my P20. I suspect the problem is the different resolutions on the phones however, I’ve already set the max-width to 1000px. I don’t understand why the CSS is not working on my P20. Is there a common fix?
Hi, you can center images using margin-right: auto and margin-left: auto.
I found a lot of other errors though.
For example, I noticed that the column column is 25% wide and 30% high. Why is that so?
On a mobile phone it should be 100% wide and the height should be free (always). Margins have also been used to correct spaces. This technique is wrong.
Checking the code, I see you’re using the Cristiano theme. There is no page builder?
Hello, Yes I am using the Cristiano theme. However, I am not familiar with wordpress at all. This week is my second week in interaction with it. I am not sure I understand what page builder is but I have been using the front-end editor to edit the page and I have been placing raw HTML codes in it.
I need to correct the spaces on the website. I was not the one who coded the website. I’m actually an intern and when I joined the company the website has already been created. I’m only upgrading it. I found out that I could move items with margins. If margin is not the correct technique to correct spaces, may I politely ask what is?
Also, I have googled on how to center images. They have provided me with the same answer ‘margin-right: auto and margin-left: auto’ but they don’t seem to work for me. I can’t seem to figure out what the problem is and therefore I hard-coded margins. I even used !important and it doesn’t seem to work.
Let’s start with the first important suggestion.
When using a third-party theme, you should not modify it directly. Instead, you should add a Child theme and work on it. If the main theme is updated, your changes will not be deleted.
Second suggestion
Instead of using the front-end editor (useful for quick interventions, but to be disabled for security reasons) I suggest using a development editor.
Third suggestion
The original Cristiano theme already has the blocks you’re editing. Do you have a way to restore the original block and modify it with small interventions, without rebuilding everything from the beginning?
Finally…
In order to understand how a grid works and how to correctly paste the contents, I suggest you to study FlexBoxes, Grid Layout, and also take a look at the Bootstrap code.
Hello again Davide. Thank you for your suggestions I’ve taken the feedback and have read up over the past 3 days. However, when I’m trying to implement it today, I have encountered a problem. On my PC it looks perfect and there was way lesser work. However, on my phone, all the photos are overlapping. I have tried everything using the link for flex-box as you have sent me but to no avail. From what I’ve read up on, I’ve learnt that normal CSS does not affect items that are placed in the flex box. I have attached a photo of what is going on on my phone. Do you have any idea how to fix it?
I haven’t looked at your new code (as I’m on a mobile at the moment) but in your old example you were using magic number negative margins to drag the text into the middle of the picture. This would have the effect of dragging the following content up as well causing an overlap of the image.
I’m guessing this is what you are still doing.
I suggest that you wrap each image in a div and add position relative to the div then absolutely place the text to the middle of the image. You can then use flexbox on the absolute element to center the text without using magic numbers. (Look up the align and justify properties of flexbox).
Hope that helps
Make sure the absolute element matches the height of the image by using top:0, bottom:0,left:0 and right:0.
Hello all. Thank you for your tremendous help. I have removed the margin css items and it has been working wonders. Except now there are 2 problems. I have no idea how to place the text inside the picture. The text is now under the picture as you can see in the screenshot below.
I can’t update the online demo as it is live servers and I don’t want incomplete work on a live server. Sorry for the inconvenience. But I have created a duplicate and have used it to do testing.
I have used the following code to get the text into place. However, I feel like it is another way of hard coding, just like using margin. There has to be a way to not hard code it am I right?
.centered {
position: absolute;
top: 33.33%;
left: 13%;
transform: translate(-50%, -50%);
}
