Code01

Site URL: https://www.jcatny.com/manga-artists

I would like to adjust the image blocks in the middle of the webpage(pentagon image and other 5 images). However, when I try to move the "02" image, the pentagon has to move too, which I do not intend. What I intend is to overlap the pentagon image and 01 and 02 images.

Anything wrong with the code?

/*1*/
#block-yui_3_17_2_1_1644157723603_162634{
  margin-top: 150px
}
/*2*/
#block-yui_3_17_2_1_1644196405231_35964{
  margin-top: 100px;
  z-index: 99;
}

/*center-image*/
#block-yui_3_17_2_1_1644147794991_236443{
  margin-right: -500px;
}
/*3*/
#block-yui_3_17_2_1_1644196405231_31566{
  margin-top: -200px
}

/*5*/
#block-yui_3_17_2_1_1644196405231_27417{
  margin-top: 230px;
  margin-right: -10px;
  margin-left: 100px;
}

Thanks, @paul2009

Site URL: https://www.hirohiro-art.com

Hi there! In terms of a bilingual website, would it be possible to hide a specific content from a footer with only using a custom CSS? Eg) Leave some text with links and hide other text with links on footer.

Thank you, tuanphan! It worked with "menu"😊 !!

Thanks, sorry I forgot to { for this but my original coding was as follows;

@media screen and (max-width:1511px) {
   #header .header-manu-nav-item:nth-child(7){
    display:none;
   }
}

It seems only the codings for media screen are not working. E. g. the code below is perfectly find,

/*For Laptop Display*/
#collection-619467dd1982eb2daf369410
  #header .header-nav-item:nth-child(7){
    display:none
}

but, when I code like below for a specific page from custom CSS, it doesn't work..

/*mobile app desplay*/
#collection-619467dd1982eb2daf369410
@media screen and (max-width:1511px) {
   #header .header-manu-nav-item:nth-child(7){
    display:none;
   }
}

Site URL: https://www.hirohiro-art.com

Site URL: https://www.hirohiro-art.com

I used the following CSS to hide a specific menu bar on mobile screens:

Design -> Custom CSS

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

   #header .header-manu-nav-item:nth-child(7){

    display:none

   }

But it has a Syntax Error and it's not working. Could you please help?

It worked! Thank you so much, @bangank36!!!

@bangank36

Yes, that's right!

Site URL: https://www.jcatny.com/manga-artists

I created blocks with HTML and CSS. At first it seemed working well, but when I released the page, the blocks' positions is not the same with the edit page. The position collapse..

Does anyone help me with this?

HTML

<p><div class="maste">
<span class="tape">SUPPORT 1</span>

<fieldset style="background:#EECD77;
                 border-radius:10px;
                 font-size: 100%;
                 padding: 15px;
                 text-align:center
                 ">
 <fieldset style="background:#00000;
                 border-radius:10px;
                 font-size: 130%;
                 padding: 15px;
                 text-align:center
                 "><span style="color:#00000;">
   <B style="color:#000000">オンラインで作品販売サポート</B></span>
<fieldset style="background:#00000;
                 border-radius:10px;
                 font-size: 70%;
                 padding: 12px;
                 text-align: center
                 "><span style="color:#00000;">
<br>毎月１度開催の“JCAT Gallery”では、SOLO展及びグループ展を開催しています。展示会での作品掲示では、作品を気に入ったファンが直接購入することができます。

</span>

CSS

<style>

.maste {
  position: relative;
  background-color: #EECD77;
  box-shadow: 0px 2px 0px 0px #D4D4D4;
  background-size: 80px 80px;
  padding: 1em;
}
.tape{
  position: absolute;
  top: -0.75em;
  background-color: rgba(255,255,255,.4);
  border-left:2px dotted rgba(0,0,0,.1);
  border-right:2px dotted rgba(0,0,0,.1);
  box-shadow:0 0 5px rgba(0,0,0,0.2);
  padding: 0.25em 2em;
  color: #65513f;
  transform: rotate(-3deg);
}
.maste p {
  color: #65513f;
  padding: 15px 10px 10px 10px;
}
</style>